homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

image swap for 5 images in a row, help please
jsut leaning javascript, I think I'm missing some code

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

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"
<html xmlns="http://www.w3.org/1999/xhtml" >
<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()
function mouseOut()

function mouseOver()
function mouseOut()
<p class="desert"><a href=".htm" target="_blank" onmouseover="mouseOver()"
<src="20b120.jpg" id="gib1" alt="" width="120" height="150" /></a></p>

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




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

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" />

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.


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

Thank you. I'll give it a try.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved