www.webdeveloper.com
Results 1 to 3 of 3

Thread: swapping images with getElementbyId & variables - doesn't work

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    swapping images with getElementbyId & variables - doesn't work

    If anyone can help me with this problem, I will forever be grateful. I've been searching the web unsuccessfully for answers for the past few days.


    I have an image of a person wearing a hat.
    I have «master.png» image of the hat (by itself) over this image which will change to a different image (same hat/different color) everytime the user clicks a different color swatch below.

    The javascript function hat(color) works but the color swatches don't show their corresponding image. Right now, regardless of which swatch you click, only the last src image listed in the (getElementbyId) code appears.

    My var color variable code seems to be correct, but I think some extra code is missing in the getElementbyId portion or in the html.

    Someone suggested writing:
    document.getElementById("master").src = "images/" + color + ".png";
    but the + color code interfers with the image links and they no longer work.

    I haven't been able to find anything on the web about how to do this.
    Please help!


    Here is the code:

    <script type="text/javascript">
    function hat(color)
    {
    var color = ['hatpink', 'hatblue', 'hatgreen'];
    document.getElementById("master").src="images/hatpink.png";
    document.getElementById("master").src="images/hatblue.png";
    document.getElementById("master").src="images/hatblack.png";
    }
    </script>



    <img id="hat" src="images/manwearinghat.png" width="100%" class="center">


    <img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">




    <img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('hatpink');" style="z-index:3">


    <img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('hatblue');" value="bluehat" style="z-index:3">


    <img src="images/swatchs/blackhat.png" width="69" height="69
    " onclick="hat('hatblack);" style="z-index:3">

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    Try:
    Code:
    <script type="text/javascript">
    function hat(imgName)
    {
    document.getElementById("master").src="images/" + imgName + ".png";
    }
    </script>
    <img id="hat" src="images/manwearinghat.png" width="100&#37;" class="center">
    <img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">
    <img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('hatpink');" style="z-index:3">
    <img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('hatblue');" style="z-index:3">
    <img src="images/swatchs/blackhat.png" width="69" height="69" onclick="hat('hatblack);" style="z-index:3">
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2012
    Posts
    2
    Rick!!!! You are a genius!!!!
    Thank you so much!!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles