Ouai :p on peut voir grace a afficher la source mais je vais vous le mettre ^^ alors : html :
<script language="javascript">
<!-- hide script from old browsers
//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "1";
//preload images:
if (browserVer = 1) {
a1 = new Image(295,223);
a1.src = "basdroit.jpg";
a2 = new Image(295,223);
a2.src = "basdroithover.jpg";
b1 = new Image(319,223);
b1.src = "basgauche.jpg";
b2 = new Image(319,223);
b2.src = "basgauchethover.jpg";
c1 = new Image(342,218);
c1.src = "hautdroit.jpg";
c2 = new Image(342,218);
c2.src = "hautdroithover.jpg";
d1 = new Image(272,218);
d1.src = "hautgauche.jpg";
d2 = new Image(272,218);
d2.src = "hautgauchehover.jpg";
}
//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer = 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>
<body>
<div id="baniére">
<img src="hautdroit.jpg" width="342" height="218" name="c" usemap="m_hautdroit" class="hautdroit"/>
<map name="m_hautdroit">
<area shape="circle" coords="157,106,61" href="http://erandia-online.fr-bb.com" target="_blank" alt="" onmouseover="hiLite('c','c2','Your Comment Here')" onmouseout="hiLite('c','c1','')" />
</map>
<img src="hautgauche.jpg" width="272" height="218" name="d" usemap="m_hautgauche" class="hautgauche"/>
<map name="m_hautgauche">
<area shape="circle" coords="122,112,61" href="accueil.html" target="_parent" alt="" onmouseover="hiLite('d','d2','Your Comment Here')" onmouseout="hiLite('d','d1','')" />
</map>
<img src="basgauche.jpg" width="319" height="223" name="b" usemap="m_basgauche" class="basgauche"/>
<map name="m_basgauche">
<area shape="circle" coords="171,139,61" href="download.html" target="_parent" alt="" onmouseover="hiLite('b','b2','Your Comment Here')" onmouseout="hiLite('b','b1','')" />
</map>
<img src="basdroit.jpg" width="295" height="223" usemap="m_basdroit" name="a" class="basdroit"/>
<map name="m_basdroit">
<area shape="circle" coords="190,116,61" href="staff.html" target="_parent" alt="" onmouseover="hiLite('a','a2','Your Comment Here')" onmouseout="hiLite('a','a1','')" />
</map>
</div>
</body>
css :
div#baniére
{
width:614px;
height:441px;
display:block;
float:left;
}
.hautgauche
{
width: 272px;
height: 218px;
float:left;
background-image:url(hautgauche.jpg);
display:block;
border:0;
}
.hautdroit
{
width: 342px;
float:right;
height: 218px;
background-image:url(hautdroit.jpg);
display:block;
border:0;
}
.basdroit
{
width: 295px;
float:right;
height: 223px;
background-image:url(basdroit.jpg);
display:block;
border:0;
}
.basgauche
{
width: 319px;
float:left;
height: 223px;
background-image:url(basgauche.jpg);
display:block;
border:0;
}
Compatible firefox ie js
