html.de - Grafik mit MouseOver Text

by SpiceLab

HTML

<div class="imagewrap">
	<img class="imageMap" src="http://www.cssplay.co.uk/menu/animalmap/animalBlank.png" usemap="#animalmap">
	<map name="animalmap" id="animalmap">
		<area shape="rect" coords="10,10,80,50" href="http://en.wikipedia.org/wiki/Monkey" />
		<area shape="poly" href="http://en.wikipedia.org/wiki/Tiger" coords="658,326,679,329,694,319,706,331,697,347,706,373,720,388,724,407,736,407,736,409,726,410,726,414,735,419,734,421,726,419,725,424,730,428,728,431,723,428,719,436,712,431,718,447,717,464,724,486,716,494,717,502,710,515,691,521,674,516,670,491,666,481,660,480,652,484,646,516,622,519,603,507,603,496,595,483,603,465,602,449,589,446,570,464,546,462,544,442,558,420,566,426,555,444,558,450,586,434,600,435,596,428,591,431,590,428,596,424,594,420,584,420,583,417,595,415,593,410,585,410,585,407,595,407,602,388,613,376,623,347,615,335,620,324,628,319,642,330">
		<area shape="poly" href="http://en.wikipedia.org/wiki/Snake" coords="454,396,461,388,469,389,480,400,496,411,497,422,500,430,499,444,468,486,469,500,485,512,501,507,501,502,471,500,470,486,499,485,517,493,521,507,509,522,487,530,460,521,445,505,425,510,430,527,417,541,395,541,386,536,389,530,411,534,418,527,411,507,416,498,424,495,442,491,448,476,475,446,475,439,452,444,442,471,439,454,427,468,438,438,426,427,419,419,427,399,432,392,437,390,446,392,449,396">
		<area shape="poly" href="http://en.wikipedia.org/wiki/Zebra"...

CSS

.imagewrap {display:block; position:relative; width:800px; height:488px; margin:40px auto; z-index:100;}
.backer {display:block; width:800px; height:488px; background:url(http://onceafterdeath.com/Map/OADmappunktecoord.png); position:absolute; left:0; top:0; z-index:-1;}
.backer:after {display:block; width:250px; background:#fff; border-radius:10px; box-shadow:2px 2px 5px rgba(0,0,0,0.4); position:absolute; left:280px; top:50px; padding:15px; font:normal 14px/18px 'latomedium', arial, sans-serif; color:#000;}
.imageMap {border:0; display:block; position:absolute; left:0; top:0; z-index:100;}
#animalmap {display:block; position:relative;}
area {display:block;}

area:hover ~ span:before {display:block; width:800px; height:488px; position:absolute; left:0; top:0;}
area:nth-of-type(1):hover ~ span:before {content:url(http://onceafterdeath.com/Map/Gabyshaus.png);}
area:nth-of-type(2):hover ~ span:before {content:url(animalmap/vulturePanel.png);}
area:nth-of-type(3):hover ~ span:before {content:url(animalmap/tigerPanel.png);}
area:nth-of-type(4):hover ~ span:before {content:url(animalmap/snakePanel.png);}
area:nth-of-type(5):hover ~ span:before {content:url(animalmap/zebraPanel.png);}
area:nth-of-type(6):hover ~ span:before {content:url(animalmap/ostrichPanel.png);}
area:nth-of-type(7):hover ~ span:before {content:url(animalmap/ostrichPanel.png);}

area:nth-of-type(1):hover ~ span:after {content:"Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails.";}
area:nth-of-type(2):hover ~ span:after {content:"A particular characteristic of many vultures is a bald head, devoid of normal feathers.";}
area:nth-of-type(3):hover ~ span:after {content:"Tigers are among the most recognisable and popular of the world's charismatic megafauna. They have featured prominently in ancient mythology and folklore.";}
area:nth-of-type(4):hover ~ span:after {content:"Snakes are elongate, legless, carnivorous reptiles of the suborder Serpentes that can be...