Als je met jouw muis over het plaatje "hovert" zal de afbeelding veranderen (tenminste als jouw javascript ingeschakeld staat). Hier is verder niets aan uit te leggen. Een simpele html-regel met
<img src="standaard.jpg" data-hsrc="hover.jpg" height="150" width="160" alt="hover javascript" />
doet de "truc". Dankzij data-hsrc valideert de procedure op de html(5). Plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina('s).
<script>
/*global document: false */
/*global Image: true */
var i,
x;
for (i = 0; i < 2; i = i + 1) {
var ar = i ? (document.getElementsByTagName ? document.getElementsByTagName('input') : (document.all ? document.all.tags('INPUT') : [])) : document.images;
for (x = 0; ar[x]; x = x + 1) {
var im = ar[x];
if (im.getAttribute) {
im.hsrc = im.getAttribute('data-hsrc');
}
im.rootsrc = im.src;
im.onmouseout = function () {
this.src = this.rootsrc;
};
im.onmouseover = function () {
this.src = this.hsrc;
};
}
}</script>