<style type="text/css">
.imageMap {display:block; position:relative; width:300px; height:300px; margin:40px auto; z-index:100;}
.backer {display:block; width:300px; height:300px; background:url(default.png); position:absolute;
left:0; top:0; z-index:-1;}
.backer:after {display:block; content:""; width:100px; height:30px; position:absolute; left:100px; top:135px;
font:bold 14px/30px arial, sans-serif; text-align:center;}
.maps {border:0; display:block; position:absolute; left:0; top:0;}
#mapper {display:block; position:relative;}
area {display:block;}
area:nth-of-type(1):hover ~ span {background:url(p1.png);}
area:nth-of-type(2):hover ~ span {background:url(p2.png);}
area:nth-of-type(3):hover ~ span {background:url(p3.png);}
area:nth-of-type(4):hover ~ span {background:url(p4.png);}
area:nth-of-type(5):hover ~ span {background:url(p5.png);}
area:nth-of-type(6):hover ~ span {background:url(p6.png);}
area:nth-of-type(1):hover ~ span:after {content:"Option One";}
area:nth-of-type(2):hover ~ span:after {content:"Option Two";}
area:nth-of-type(3):hover ~ span:after {content:"Option Three";}
area:nth-of-type(4):hover ~ span:after {content:"Option Four";}
area:nth-of-type(5):hover ~ span:after {content:"Option Five";}
area:nth-of-type(6):hover ~ span:after {content:"Option Six";}
</style>
<br><br>
<div class ="imageMap">
<img class ="maps" src="blank2.png" usemap="#mapper">
<map name="mapper" id="mapper">
<area href="#a" shape="poly" coords="150,0,214,38,186,85,115,85,87,38" title="option one">
<area href="#b" shape="poly" coords="217,40,281,76,281,148,225,148,191,88" title="option two">
<area href="#c" shape="poly" coords="224,153,280,153,280,227,217,263,189,215" title="option three">
<area href="#d" shape="poly" coords="184,216,213,264,150,300,68,264,114,216" title="option four">
<area href="#e" shape="poly" coords="19,152,76,152,111,213,83,262,20,226" title="option five">
<area href="#f" shape="poly" coords="84,40,112,88,77,149,21,149,21,78" title="option six">
<span class ="backer"></span>
</map>
</div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
|