CSS Image Mapping

A <div class= "ImageMap" >  <ul> < Li class= "rim" ><a href= "title=" rim ">Rim</a></li> <li class=" Jim "><a href=" title= " Jim ">Jim</a></li> <li class=" sim "><a href=" "title=" Sim ">Sim</a></li> <li Class= "Nim" ><a href= "" title= "Nim Get What" >Nim</a></li> </ul>  </div>

The above is the code portion of the HTML, and the picture is in the div container. Hotspots are nested with unordered List <a> label form.

. imagemap{margin-Top:2em;　　width:496px;　　height:382px; position:relative;/*KEY*/}.imagemap ul{margin:0; padding:0; List-Style:none;}. ImageMap a{Position:absolute;//absolute position in the upper left corner of the container negative indent text to make it disappearDisplay:block;　　width:60px;　　height:65px; Text-indent:-1000em;}
/* Position the hotspot */.imagemap. Rim a{top:20px;　　Left:75px}.imagemap Jim A{top:20px;　　Left:215px}.imagemap. Sim a{top:25px;　　Left:375px}.imagemap. Nim a{top:65px; LEFT:285PX}
/* Achieve reversal effect */.imagemap A:hover,.imagemap a:focus{border:1px solid #fff;}

The width of the container should be consistent with the picture , and be careful to set relative positioning .

Set the width of the hotspot according to the Avatar size, apply absolute positioning, and the text is hidden with a large negative indent .

Set the hotspot location for each image position. (The effect is as follows)

Flicker-style rollover

The difference between the two is that the original base of the box and explain the label, for this purpose in the original <a> tag inserted three span tags, two are the outer box, one is to explain the label.

<div class= "ImageMap" >  <ul> <li class= "Rim" ><a href= "title=" rim "><span class=" outer "><span class=" inner "><span class=" Note ">Rim</span></span></span></a></li> <li class=" Jim "><a href=" "title = "Jim" ><span class= "outer" ><span class= "inner" ><span class= "note" >jim</span></span ></span></a></li> <li class= "sim" ><a href= "" title= "Sim" ><span class= "outer" ><span class= "inner" ><span class= "note" >sim</span></span></span></a></ Li> <li class= "Nim" ><a href= "title=" Nim Get What "><span class=" outer "><span class=" inner "> <span class= "Note" >Nim</span></span></span></a></li> </ul>  </ Div>

. Imagemap{margin-top:2em;width:496px;height:382px;position:relative;/*KEY*/}.imagemap Ul{margin:0;p adding:0; list-Style:none;}. ImageMap A{position:absolute;/*absolute position in the upper left corner of the container negative indent text to make it disappear*/display:block;color:#000; border:1px solid Transparent;} ImageMap A. outer{display:block;border:1px solid transparent;}. ImageMap A. inner{display:block;width:60px;height:65px;border:1px solid transparent;}. ImageMap rim A{top:20px;left:75px}.imagemap Jim A{top:20px;left:215px}.imagemap. Sim a{top:25px;left:375px}. ImageMap. Nim A{top:65px;left:285px}.imagemap a:hover,.imagemap a:focus{border-color: #d4d82d;}. ImageMap A. Note{position:absolute;bottom:-2em;width:3em;padding:0.2em 0. 5em;background-color: #ffc; text-Align:center;left:-1000em;//in normal state hide explain label margin-left:-2em;//the label in the center of the hotspot. }.imagemap a:hover. Outer,.imagemap a:focus. Outer{border-color: #000;}. ImageMap a:hover. Inner,.imagemap a:focus. Inner{border-color: #fff;}. ImageMap a:hover. Note,.imagemap a:focus. note{left:30px;}

CSS Image Mapping