Multiple Image Swap

HI,

Here is the site page I am working on so you can see the issue. [URL=http://www.thescrapbooksite.com/default2.asp]www.thescrapbooksite.com/default2.asp[/URL]

If you view this my explanation of my issue will make more sense. You could also view source to help….I’ll also include code below.

WHAT I AM TRYING TO DO:
I have an image that I want to roll over (February Kit 1 Resolutions – image name “kitone_off.gif”) and I need that image to change to image name “kitone_on.gif”. It also need to add a hyperlink to it if clicked(kit.asp). At the same time this happens I need the large image of the boy(owen.gif)to also change to a new image (kit2rollover.jpg).

ISSUE/ERROR:
I can always get one to work but not both. The original images show fine when you are first at the site, on the rollover it displays as if the images are not there and does not return to original image. I get no javascrip error. Yes, the image are placed in the correct images folder. (maybe I need to direct the javascript to the images folder…but not sure)

Here is the javascript at the top of the html page.

[code=html]
<script language=”JavaScript” type=”text/JavaScript”>
<!– Begin

if (document.images)
{
pic1on= new Image(100,25);
pic1on.src=”kitone_on.gif”;
pic2on= new Image(100,25);
pic2on.src=”owen.gif”;
pic3on= new Image(100,25);
pic3on.src=”kitone_one.gif”;

pic1off= new Image(100,25);
pic1off.src=”kitone_off.gif”;
pic2off= new Image(100,25);
pic2off.src=”kit2rollover.jpg”;
pic3off= new Image(100,25);
pic3off.src=”kitone_off.gif”;
}

function lightup(imgName,imgName2)
{
if (document.images)
{
imgOn=eval(imgName + “on.src”);
document[imgName].src= imgOn;
imgOn2=eval(imgName2 + “on.src”);
document[imgName2].src= imgOn2;
}
}

function turnoff(imgName,imgName2)
{
if (document.images)
{
imgOff=eval(imgName + “off.src”);
document[imgName].src= imgOff;
imgOff2=eval(imgName2 + “off.src”);
document[imgName2].src= imgOff2;
}
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>
[/code]

And here is the html code down in the page:

[code=html]<td><a href = “kit.asp” onMouseover=”lightup(‘pic1′,’pic2’)” onMouseout=”turnoff(‘pic1′,’pic2’)”><img src=”images/kitone_off.gif” alt=”February Kit 1 Resolutions” name=”pic1″ width=”140″ height=”140″ id=”pic1″></a></td>[/code]

You would be my hero if you help me out….I offered to help a friend out on this site (for free) of course and I can’t tell you how long I have been working on just this little bugger. Not to mention I am a newbie. :rolleyes:

thanks!

Also in #JavaScript _↴