Menu
Hi
I’m having trouble writing a script for an image swap, its only a small one, but its providing me with enough headache, basically I want it to code so that when I put my mouse over say “image1″ then it changes image2” to “image3”.
Normally I could do this using Adobe Imageready and the slice tool, using rollovers, but this particular code is going to be used to display thumbnail images for when the mouse goes over a hyperlink. Therefore I’d have to slice in every image I wanted as a thumbnail instead of just specifying the actual image address in code. And therefore because I’m going to be thumbnailing 1000’s of pictures I really don’t want to waste the time in imageready. Anyway atm the code is as follows. (I’ve loaded two other scripts to allow the mouseover function to work btw)
HEAD
//this is the script that preloads the images I want, I’m just using one image atm to show as an example,
<script language=”JavaScript”>
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
mutant_base_over = newImage(“smiley_face__roadkillA.gif”);
preloadFlag = true;
}
}
</script>
BODY
// these are the two loaded scripts for function use
<SCRIPT LANGUAGE=”JavaScript” SRC=”overlib.js”></SCRIPT>
<SCRIPT LANGUAGE=”JavaScript” SRC=”OverLibMain.js”></SCRIPT>
// when the mouse is over “the-mutant.jpg” then it should change “base.gif to “smiley_face__roadkillA.gif”.
<a href=”#” onMouseOver=”changeImages(‘Base’, ‘smiley_face__roadkillA.gif’); return true;” onMouseOut=”changeImages(‘Base’, ‘base.gif’); return true;”><img src=”the-mutant.jpg” name=”mutant”></a>
Any help on why this isn’t working or advise on alternate ways to do this would be extremely helpful thanks