...

View Full Version : Javascript image swap effect



PatsFan89
11-27-2012, 11:56 AM
I am using an 'image swap' on mouseover effect for my menu on my site. It is located at http://www.matthewedward.ca. However, only the first link on the menu (Home) will work. A snippet from the original is as follows:

image01= new Image()
image01.src="test.gif"
image02= new Image()
image02.src="test2.gif"

So I tweaked it to add another (image03 and image04) mouseover and mouseout image like so:

image01= new Image()
image01.src="test.gif"
image02= new Image()
image02.src="test2.gif"
image03= new Image()
image03.src="test3.gif"
image04= new Image()
image04.src="test4.gif"

However, the images I added in the code don't work.

Here is the other piece of code where the menu is displayed:

<a href="index.shtml" onmouseover="rollover('Home', image02)"
onmouseout="rollover('Home', image01)">
<img src="/images/Home_off.jpg" name="Home" border="0"><a href="a href="aboutus.shtml" onmouseover="rollover('Aboutus', image04)"
onmouseout="rollover('Aboutus', image03)"></a><img src="/images/aboutus_off.jpg" name="Aboutus" border="0"><img src="/images/Portfolio_off.jpg" width="144" height="60" /><img src="/images/development_off.jpg" width="175" height="60" /><img src="/images/design_off.jpg" width="119" height="60" /><img src="/images/services_off.jpg" width="131" height="60" /><img src="/images/request_off.jpg" width="182" height="60" /><br />
<br />

So, in conclusion, how do I add multiple images to work for the mouseover swap? So far, only the home link (home_on.jpg and home_off.jpg or 'image01' and 'image02') will work. Help!

vwphillips
11-27-2012, 04:02 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
image01= new Image()
image01.src="http://www.vicsjavascripts.org.uk/StdImages/3.gif"
image02= new Image()
image02.src="http://www.vicsjavascripts.org.uk/StdImages/4.gif"
image03= new Image()
image03.src="http://www.vicsjavascripts.org.uk/StdImages/5.gif"
image04= new Image()
image04.src="http://www.vicsjavascripts.org.uk/StdImages/6.gif"

function rollover(id,img){
document.getElementById(id).src=img.src;
}
/*]]>*/
</script></head>

<body>
<a href="index.shtml" onmouseover="rollover('Home', image02)" onmouseout="rollover('Home', image01)">
<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" id="Home" border="0">
</a>
<a href="aboutus.shtml" onmouseover="rollover('Aboutus', image04)" onmouseout="rollover('Aboutus', image03)">
<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" id="Aboutus" border="0">
</a>
<br />
<br />

</body>

</html>

007julien
11-27-2012, 04:27 PM
Your script use the function rollover which use the document.images object collection.


function rollover(imagename, newsrc){
document.images[imagename].src=newsrc.src
}
But this collection (see this w3scholls.com page (http://www.w3schools.com/jsref/coll_doc_images.asp)) is not indexed with the image names !

PatsFan89
11-27-2012, 09:46 PM
I don't understand...

007julien
11-28-2012, 10:17 AM
The images collection is : images[0], images[1], images[2] ... in the order the images appears on the page which differs from images[imagename1], images[imagename2], images[imagename3] ... !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum