Onclick image swapping

JavaScript
1

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:


<script language="javascript">

function swapImage(hash) {
	document.getElementById('imageSwap').src=''+hash+'.jpg';
}

</script>



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



<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

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…

<!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 :slight_smile:

3

That’s awesome, thanks for the example and the detailed explanation. Certainly gives me something to get my teeth into! Cheers.

4

No problem, glad i could help :stuck_out_tongue: