css-Image Mapping

Image mapping is to turn some areas into hotspots, we get search images on the internet, there will be a brief description of the task on the image, there is a contact more is the QQ Space album, browse the QQ space photos of the mouse slide to the character avatar when you choose to mark the characters, are the picture and content mixed together to perform. Users look at the picture is not cold cold pictures, in fact, is to achieve this kind of content and image mapping is very simple, simple look at the effect:

HTML code:

 <!--Blog Park-flyelephant http://www.cnblogs.com/xiaofeixiang/--<DIV CL ass= "Group-img" >  <ul> <li class=" li "> <a href=" http:        www.cnblogs.com/xiaofeixiang/"> <span class=" outer "> <span class=" inner ">                <span class= "Note" > Jet li </span> </span> </span> </a> </li> <li class= "Yao" > <a href= "http://www.cnblogs.com/x iaofeixiang/"> <span class=" outer "> <span class=" inner "> <span class=" Note "> Yao Ming </span        > </span> </span> </a> </li> </ul> </div> 

CSS code:

    . group-img {width:423px;        height:480px;    position:relative;        }. group-img a {position:absolute;        Display:block;        Text-decoration:none;        Color: #000;    border:1px solid Transparent;        }. Group-img A. Outer {display:block;    border:1px solid Transparent;        }. Group-img A. inner {display:block;        width:100px;        height:80px;        border:1px solid Transparent;    margin:3px;        }. group-img A. Note {position:absolute;        top:100px;        Left: -9999px;        Background: #BDBDBD;        width:106px;        padding:5px;        Text-align:center;    Color: #fff;        }. group-img. li a {top:100px;    left:120px;        }. group-img. Yao a {top:8px;    left:260px;    }. group-img a:hover,. group-img a:focus {border:1px solid #d4d82d; }. group-img a:hover. Outer,. group-IMG a:focus. Outer {border:1px solid #00FF7F;    }. group-img a:hover. Inner,. group-img a:focus. Inner {border:1px solid #00CED1;    }. group-img a:hover. Note,. group-img A:focus. Note {left:0px; }

CSS layout need to pay attention to two points the size of the container and the size of the picture is consistent, the text is not displayed through the left hidden text, mouse sliding back to normal ~

css-Image Mapping