Simple CSS3 Image Mapping
----------------------------------------------DEMO-------------------------------------------------
----------------------------------------------CSS3-------------------------------------------------
body { font-family:tahoma arial, sans-serif; }
#imap { display:block; width:400px; height:468px; background:url(hiox_boys.jpg) no-repeat; position:relative;}
#imap a#title { display:block; width:400px; height:0; padding-top:470px; overflow:hidden; position:absolute; left:0; top:0;
background:transparent url(hover.png) no-repeat 400px 400px; cursor:default;}
* html #imap a#title { height:240px; }
#imap a#title:hover {background-position:0 0; z-index:10;}
#imap dd {position:absolute; padding:0; margin:0;}
#imap #picp {left:66px; top:46px; z-index:20;}
#imap #picr {left:125px; top:65px; z-index:20;}
#imap #picj {left:225px; top:50px; z-index:20;}
#imap #picg {left:285px; top:25px; z-index:20;}
#imap a#lax, #imap a#muthu, #imap a#jcr, #imap a#naveen
{ display:block; width:60px; height:60px; background:transparent url(hover1.png) -100px -100px no-repeat; text-decoration:none; z-index:20; }
#imap a span, #imap a:visited span {display:none;}
#imap a#lax:hover, #imap a#muthu:hover, #imap a#jcr:hover, #imap a#naveen:hover {background-position:0 0;}
#imap a:hover span {position:absolute; width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}
* html #imap a:hover span {width:400px; }
#imap a#lax:hover span {left:-66px; top:420px;}
#imap a#muthu:hover span {left:-125px; top:403px;}
#imap a#jcr:hover span {left:-225px; top:418px;}
#imap a#naveen:hover span {left:-285px; top:443px;}
#imap a span:first-line {font-weight:bold; font-style:italic;}
----------------------------------------------HTML5-------------------------------------------------
<dl id="imap">
<dt>
<dd id="picp">
<span>Lakshmi Kanthan ( Server Administrator )<br />
ServerTeam specialise in IT Support for small businesses located in West Yorkshire.
ServerTeam specialise in IT Support for small businesses located in West Yorkshire.
ServerTeam specialise in IT Support for small businesses located in West Yorkshire.
</span></a>
</dd>
<dd id="picr">
<span>Muthukumar ( Web Designer )<br />
WebDesignerMag.co.uk is a web design blog by the creators of Web Designer Magazine. This website covers web design news, features, inspiration, tutorials
WebDesignerMag.co.uk is a web design blog by the creators of Web Designer Magazine. This website covers web design news, features, inspiration, tutorials
</span></a></dd>
<dd id="picj">
This article is about using Internet information in research; for the field of research about the Internet, see Internet studies.
This article is about using Internet information in research; for the field of research about the Internet, see Internet studies.
</span></a></dd>
<dd id="picg">
<span>Naveen Kumar ( Web Developer )<br />
A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications, or distributed network
A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications, or distributed network
</span></a></dd>
</dl>
----------------------------------------------IMAGES------------------------------------------------
