Forum Moderators: open
Code:
var W3CDOM = (document.createElement && document.getElementsByTagName); var mouseOvers = new Array(); var mouseOuts = new Array(); window.onload = init; function init() { if (!W3CDOM) return; var nav = document.getElementById('mouseovers'); var imgs = nav.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('.')); mouseOuts[i] = new Image(); mouseOuts[i].src = imgs[i].src; mouseOvers[i] = new Image(); mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix; imgs[i].number = i; } } function mouseGoesOver() { this.src = mouseOvers[this.number].src; } function mouseGoesOut() { this.src = mouseOuts[this.number].src; }
this piece of javascript makes onclick state work too
Code:
// Some variables var base= "pix/mo_" var nrm = new Array(); var omo = new Array(); var ocl = new Array(); var stuff = new Array('home','place'); var select = -1; var name2 = ""; var temp = 0; // Pre-load part. if (document.images) { for (i=0;i<stuff.length;i++) { nrm[i] = new Image; nrm[i].src = base + stuff[i] + ".gif" omo[i] = new Image; omo[i].src = base + stuff[i] + "_omo.gif"; ocl[i] = new Image; ocl[i].src = base + stuff[i] + "_clic.gif"; } } // The functions: first mouseover, then mouseout function over(no) { if (document.images && select!= no) { document.images[stuff[no]].src = omo[no].src } } function out(no) { if (document.images && select!= no) { document.images[stuff[no]].src = nrm[no].src } } function clic(no) { if (document.images) { document.images[stuff[no]].src = ocl[no].src temp = select; select = no; if (temp!= -1) {out(temp)} } }
Are you trying to get a third graphic to show onclick? You can try onmousedown, instead, but your results will be spotty at best, as many browsers treat the onmouseup (onclick) event as the final event, and the graphic may or may not have time to display before the page is redirected.
