SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onclick image swapping

    Hi guys,

    I've currently got some bodged code for changing an image within a div. I've since realised that IE 8 and below do not support an onclick method on an <option> tag and that this isn't good practice anyway.

    I'm trying to get my head around reaching my desired result using onchange, but I'm struggling.

    Here's the output as it stands using onclick:



    Code:
    <script language="javascript">
    
    function swapImage(hash) {
    	document.getElementById('imageSwap').src=''+hash+'.jpg';
    }
    
    </script>

    Code:
    <div id="builder_image">
     
    <img src="rw_blue.jpg" id="imageSwap" alt="" />
     
    </div>

    Code:
    <select name="option3">
            <option value="No thanks" selected="selected" onclick="swapImage('rw_blue');return false;">No thanks</option>
            <option value="Blue" onclick="swapImage('rw_blue');return false;">Blue</option>
            <option value="Black"onclick="swapImage('rw_black');return false;">Black</option>
            <option value="Red" onclick="swapImage('rw_red');return false;">Red</option>
    </select>

    Any help or pointers greatly appreciated as always. Cheers!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Indeed you cannot use onclick events on option elements but you can use a neat event called onchange which is an attribute for the select element. Essentially if you attach this event to a select box it does all the hard work for you and allows you return simple function arguments such as this.value and such. See the example i wrote below which is your HTML and javascript but notice the differences...

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Select box event</title>
    <script type="text/javascript">
        function swapImage(hash) {
            document.getElementById('imageSwap').src = hash + '.jpg';
        }
    </script>
    </head>
    <body>
    
    <div id="builder_image">
        <img src="rw_blue.jpg" id="imageSwap" alt="" />
    </div>
    
    <select name="option3" onchange="swapImage(this.options[selectedIndex].label)">
        <option value="No thanks" selected="selected" label="rw_blue">No thanks</option>
        <option value="Blue" label="rw_blue">Blue</option>
        <option value="Black" label="rw_black">Black</option>
        <option value="Red" label="rw_red">Red</option>
    </select>
    
    </body>
    </html>
    So to break it down your swapImage() function hasn't changed except for the fact that i changed it ever so slightly from ".src=''+hash+'.jpg';" to ".src = hash + '.jpg';" as you don't need ''+ in front of a var with a = before it.

    Moving on the next thing you will see is the onchange attribute which references your function but also does something else which is what makes javascript cool. Essentially to break it down this refers to the current element, options is a method of this and selectedIndex is the option index based on its position in the select box.

    The final method label selects the attribute label from the selected element then returns the value as an argument for the function. So more or less the onchange event is cool, if you need anymore help let me know but this should be enough to get you thinking bud

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's awesome, thanks for the example and the detailed explanation. Certainly gives me something to get my teeth into! Cheers.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem, glad i could help


Bookmarks

Posting Permissions

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