In fact, the picture here can be defined with CSS code when used normally.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" lang= "en" > <pead> <title> making CSS mouse hover menu using picture switching technology </title> <style type= "Text/css" > Div#spritemenu {height:50px; width:400px; font-size:9px; Background-image:url (yun_qi_img/spritemenu.gif); Overflow:hidden; } Div#spritemenu ul li {display:inline; margin:0px; padding:0px; } Div#spritemenu ul Li a {display:block; position:relative; height:50px; Div#spritemenu ul li a:hover {background-image:url (yun_qi_img/spritemenu.gif); } Div#spritemenu ul {margin:0px; padding:0px; List-style-type:none; height:50px; } div#spritemenu span {display:none; Div#spritemenu Li.buttona a {top:0px; left:0px; width:80px; background-position:0px 0px;} Div#spritemenu li.buttonb A {top: -50px; left:82px; width:64px; background-position: -82px 0px;} DiV#spritemenu Li.buttonc A {top: -100px; left:148px; width:76px; background-position: -148px 0px;} Div#spritemenu Li.buttond A {top: -150px; left:226px; width:70px; background-position: -226px 0px;} Div#spritemenu Li.buttone A {top: -200px; left:298px; width:102px; background-position: -298px 0px;} Div#spritemenu Li.buttona a:hover {background-position:0px-50px;} Div#spritemenu li.buttonb a:hover {background-position: -82px-50px;} Div#spritemenu li.buttonc a:hover {background-position: -148px-50px;} Div#spritemenu li.buttond a:hover {background-position: -226px-50px;} Div#spritemenu li.buttone a:hover {background-position: -298px-50px;} </style> </pead> <body> <div id= "Spritemenu" > <ul> <li class= "Buttona" ><sp an>home</span></li> <li class= "buttonb" ><span>About</span></li> <li cl ass= "Buttonc" ><span>Contact</span></li> <li class= "Buttond" ><span>Forum</span></li> <li class= "Buttone" ><span>guestbook</span></li > </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
