Using functions to swap images

David P. · 03-08-2009, 12:31 AM

Ok, so this is my problem. I want multiple images to be able to call this function and run it as planned. This is my question, how do you make it so that the name of the tag can be dynamic in the function. Sorry if I don't make myself clear, here's my code if it helps.

<html>
<head>
<title>Example</title>
</head>
<script type="text/javascript">
function one( a, b ){
if ( a == 1 ){
/* right here were it says document.one.src = one.jpg;
how do I make it so that "one", the name of the <img>, can be dynamic so that other <img> can put the name of their tags there? */
document.one.src = b;
}
else if ( a == 2 ){
document.one.src = b;
}
}
</script>
<body>
<a onMouseOver="one( 1, 'one.jpg' )" onMouseOut="one( 2, 'two.jpg' )">
<img name="one" src="two.jpg" />
</a>

<a onMouseOver="one( 1, 'one.jpg' )" onMouseOut="one( 2, 'two.jpg' )">
<img name="two" src="two.jpg" />
</a>
</body>
</html>

Ok, so this isn't EXACTLY my code, but it's exactly the same thing as what I'm doing. I just gave some parts easier names, so it's easier to follow. Oh, and if I forgot to say, this is an image swap. So can someone please help me?

Old Pedant · 03-08-2009, 01:16 AM

Well, there are lots of ways to do this. And you've made it more complex than needed. Why do you need to pass two arguments???

I'd probably opt for this:

Code:

<body>
<img src="two.jpg" onmouseover="this.src='one.jpg';" onmouseout="this.src='two.jpg';"/>
...
<img src="two.jpg" onmouseover="this.src='one.jpg';" onmouseout="this.src='two.jpg';"/>
...
<img src="two.jpg" onmouseover="this.src='one.jpg';" onmouseout="this.src='two.jpg';"/>
</body>

Why make it harder than that?

David P. · 03-08-2009, 01:22 AM

So is there any way of using this function to swap images???

David P. · 03-08-2009, 01:25 AM

I agree with you one-hundred percent, and know that that works to. The reason why I'm doing it like this is because I'm in a computer class and my teacher wants us to use functions to swap images. Since I have a whole bunch of images that are going to be swapped in my website, also for my computer class, I want to be able to do them all calling one function.

Old Pedant · 03-08-2009, 01:41 AM

<shrug>
SO just move my code into a function.
</shrug>

Code:

<head>
function showImage(where,name)
{
    where.src = name;
}
</head>
<body>
<img src="two.jpg" onmouseover="showImage('one.jpg');" onmouseout="showImage(this,'two.jpg');"/>
...
<img src="two.jpg" onmouseover="showImage('one.jpg');" onmouseout="showImage(this,'two.jpg');"/>
...
<img src="two.jpg" onmouseover="showImage('one.jpg');" onmouseout="showImage(this,'two.jpg');"/>
...
</body>

If the instructor insists that the onmouseover be on the <A> tag, instead, then there are a few solutions. But the most elegant is *still* to NOT need to pass the id/name of the <img> tag.

Instead, "find" the <img> as a subelement of the <a> tag!

Code:

<html>
<head>
<script>
function show(where,what)
{
    var img = where.getElementsByTagName("img")[0];
    img.src = what;
}
</script>
</head>
<body>
<A href="http://www.yahoo.com" onclick="return false;"
   onmouseover="show(this,'one.jpg');"
   onmouseout ="show(this,'two.jpg');"
><img src="two.jpg"></A>
<p>
<A href="http://www.yahoo.com" onclick="return false;"
   onmouseover="show(this,'one.jpg');"
   onmouseout ="show(this,'two.jpg');"
><img src="two.jpg"></A>
<p>
<A href="http://www.google.com" onclick="return false;"
   onmouseover="show(this,'framitz.jpg');"
   onmouseout ="show(this,'wookie.jpg');"
><img src="wookie.jpg"></A>
</body>
</html>

David P. · 03-08-2009, 03:12 AM

Thank you so much. This did exactly what i needed. now all I have to do is to find out how to mark this question as resolved...