Is still the example of "Mastering CSS" in the conversion, first on the code:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><styletype= "Text/css">. Remote{width:496px;Height:501px;position:relative}. Remote UL{margin:0;padding:0;List-style:None;}. Remote A. Hotspot{width:250px;Height:250px;position:Absolute; }. Remote. Mei A. Hotspot{Top:0; Left:0; }. Remote. LAN A. Hotspot{Top:0; Left:250px; }. Remote. Zhu A. Hotspot{Top:250px; Left:0; }. Remote. Ju A. Hotspot{Top:250px; Left:250px; }. Remote A. Link{position:Absolute;Display:Block;width:10em; Right:-11em;cursor:Pointer}. Remote. Mei A. Link{Top:0;}. Remote. LAN A. Link{Top:1.2em;}. Remote. Zhu A. Link{Top:2.4em;}. Remote. Ju A. Link{Top:3.6em;}. Remote a:hover. Hotspot,.remote a:focus. Hotspot{Border:3px dotted #930}. Remote a:hover. link,.remote a:focus. Link{Color:#930}</style></Head><Body><Divclass= "Remote"> <imgsrc= "image rollover at long distance. jpg"width= "496"Height= "501"alt= "Plum Orchid Bamboo Chrysanthemum Chart"/> <ul> <Liclass= "Mei"> <ahref="#"title= "Plum Blossom"> <spanclass= "Hotspot"></span> <spanclass= "link">»Mei</span> </a> </Li> <Liclass= "LAN"> <ahref="#"title= "Orchid"> <spanclass= "Hotspot"></span> <spanclass= "link">»Lan</span> </a> </Li> <Liclass= "Zhu"> <ahref="#"title= "Bamboo"> <spanclass= "Hotspot"></span> <spanclass= "link">»Bamboo</span> </a> </Li> <Liclass= "Ju"> <ahref="#"title= "Chrysanthemum"> <spanclass= "Hotspot"></span> <spanclass= "link">»Chrysanthemum</span> </a> </Li> </ul></Div></Body></HTML>
:
In the process of attention:
First, the Text and Hot box (hotspot) by the span tag is placed in a tag inside, you can make it to achieve synchronization changes, the span tag is still very powerful, to use in the appropriate time ~
Second, write CSS style to have ideas, do not write, of course, you should start when you better have a brain complement the process of implementation, so that you can operate to find more organized ...
css--realize long-distance image rollover effect