Le HTML
<ul id="rollOver">
<li><a href="#"><img src="home.gif" alt="accueil" width="30" height="30" /></a></li>
<li><a href="#"><img src="turtle.gif" alt="Libérez les tortues" width="30" height="30" /></a></li>
<li><a href="#"><img src="tux.gif" alt="Libérez les tux" width="30" height="30" /></a></li>
</ul>
Le JS
var DOM_browser = (document.createElement && document.getElementsByTagName);
var class_selecteur = 'rollOver';
//tableaux pour le préchagement
var imgOvers = new Array();
var imgOuts = new Array();
function menuRollOver() {
if (!DOM_browser) return;
var menu = document.getElementById(class_selecteur);
var imgs = menu.getElementsByTagName('img');
for (var i=0; i<imgs.length; i++) {
imgs[i].onmouseover = mouseGoesOver;
imgs[i].onmouseout = mouseGoesOut;
var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
imgOuts[i] = new Image();
imgOuts[i].src = imgs[i].src;
imgOvers[i] = new Image();
imgOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_over" + suffix;
imgs[i].number = i;
}
}
function mouseGoesOver() {
this.src = imgOvers[this.number].src;
}
function mouseGoesOut() {
this.src = imgOuts[this.number].src;
}
window.onload = function() {
menuRollOver();
}
Le CSS
ul#rollOver {
list-style: none;
height: 40px;
}
ul#rollOver li {
float: left;
}
#rollOver img {
border: none;
}