image swap for 5 images in a row, help please - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

image swap for 5 images in a row, help please

jsut leaning javascript, I think I'm missing some code

Artsyrat

6:12 pm on Apr 3, 2009 (gmt 0)

10+ Year Member

I'm attempting to learn javascript, following instructions from different sources including w3schools, on how to do an image swap. I'm obviously missing something, just one set of images is swapping on mouseover/mouseout. Hope someone can give me some advice. Here's the code I'm using. There's 5 sets of images, I'm posting only 2.

<!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" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
function mouseOver()
{
document.getElementById("gib1").src="3b120.jpg"
}
function mouseOut()
{
document.getElementById("gib1").src="20b120.jpg"
}

function mouseOver()
{
document.getElementById("gib2").src="3p120.jpg"
}
function mouseOut()
{
document.getElementById("gib2").src="20p120.jpg"
}
</script>
<body>
<p class="desert"><a href=".htm" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<src="20b120.jpg" id="gib1" alt="" width="120" height="150" /></a></p>

<p class="tropical"><a href=".htm" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<src="20p120.jpg" id="gib2" width="120" height="150" alt="" /></a></p>

Thanks
Artsyrat

blang

6:42 pm on Apr 3, 2009 (gmt 0)

10+ Year Member

just one set of images is swapping on mouseover/mouseout

Based on your code, yes, that's what you asked it to do. For some reason you have two separate sets of functions with the same name, so the second set are the ones that are actually used.

Your markup also has a major issue, in that you've left out the actual "img" in the <img/> tag.

Here's what you want to do:


function changeImage(t, imgSrc) { 
 var target= document.getElementById(t); 
 if ( target ) { 
 target.setAttribute("src", imgSrc); 
 } 
}

So we have a nice simple clean single function that takes an element ID value, and an image source. The function takes the argument 't', retrieves the document element object based on that id value, tests to make sure it's valid, and then uses the setAttribute method to change the "src" attribute.

You really should use some DOM method to perform the event handling, but for now let's continue to use the inline event handlers as you've done.


<p class="desert"> 
 <a href="yourdoc.htm" target="_blank" onmouseover="changeImage('gib1','3p120.jpg');" onmouseout="changeImage('gib1','20b120.jpg');"> 
 <img src="20b120.jpg" id="gib1" alt="" width="120" height="150" /> 
 </a> 
</p>

So you see the onmouseout event handler calls the function and gives it the element id (in this case 'gib1') and the image source of the image you want on the rollover (in this case '3p120.jpg'). It's versatile in that you only have a single function declaration, and it's totally flexible. You could even use it for other events (onclick,onmousedown,etc). Note that I put a document name in there, it was missing.

Artsyrat

11:08 pm on Apr 3, 2009 (gmt 0)

10+ Year Member

Thank you. I'll give it a try.