bonjour pour changer la couleur d'une zone il n'y a pas 36 solution il faut crée une image map pour chaque zones avec la zone survolé de couleur différente ensuite on met un evenement onmousever pour chaques zones qui changera l'image c'est lourd mais c'est la seul solution. pour le toltype un simple div qui sera affiché selon la position de la souris avec un petit decalage par un display block et que l'on fera disparaitre par un display block
tu peut t'inspirer de ce code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
tbt1 =new Array ("texte 1 tab1","texte 2 tab1","texte 3 tab1","texte 4 tab1")
tbimage =new Array ("image_de _la_mape_zone1.jpg","image_de _la_mape_zone2.jpg","image_de _la_mape_zone3.jpg","image_de _la_mape_zone4.jpg")
function trap(evt,index){
dyna=document.getElementById('dyn')
if(arguments.length>0){
var dde=(navigator.vendor) ? document.body : document.documentElement;
evt =(!evt) ? window.event : evt;
var XX =evt.clientX + dde.scrollLeft;
var YY =evt.clientY + dde.scrollTop;
dyna.style.top=YY-15+'px'
dyna.style.left=XX+15+'px'
document.getElementById('txt1').firstChild.nodeValue=tbt1[index];
document.getElementById('zone_map').src=tbimage[index]
dyna.style.display='block'
}
else{
dyna.style.display='none'
document.getElementById('zone_map').src='image_de _la_mape_originale.jpg'
}
}
</script>
</head>
<body>
<div id='dyn' style='height:70px;width:100px;display:none;position:absolute;top:0;left:0;background-color:yellow'>
<span id='txt1'>du texte</span>
</div>
<IMG src="image_de _la_mape_originale.jpg" USEMAP="#la_mape" id='zone_map' Alt="coucou">
<MAP NAME="la_mape">
<AREA SHAPE=RECT COORDS="0,50,215,149" onmouseover='trap(event,0)' onmouseout='trap()'>
<AREA SHAPE=RECT COORDS="1,165,78,299" onmouseover='trap(event,1)' onmouseout='trap()'>
<AREA SHAPE=RECT COORDS="2,0,480,35" onmouseover='trap(event,2)' onmouseout=trap()>>
<AREA SHAPE=RECT COORDS="268,45,480,147" onmouseover='trap(event,3)' onmouseout='trap()'>
</MAP>
</body></html>