Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Using functions to swap images

    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>
    <!-- I want it so that this image can call the same function and replace "one" in "document.one.src" with its name; "two" -->
    <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?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So is there any way of using this function to swap images???
    Last edited by David P.; 03-08-2009 at 01:26 AM.

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    <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>

  • Users who have thanked Old Pedant for this post:

    David P. (03-08-2009)

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •