CODEWITHSUNDEEP
javascriptimage
ChrisKsag
ChrisKsag

Reputation: 134

Change Image based on dropdown and image link

Expanding on the question here: How to use javascript to swap images with option change?

In accordance with the method in that question of changing an image based on a select option, how would I also change the <a></a> link around the image to mirror the displayed image?

<script>
var colorUrlMap = {
  "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
  //Add more here
  "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
  <option value="Black/White">Black/White</option>
  <!-- Add more here -->
  <option value="White/Red/Black">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">

example:

<a href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

Upvotes: 0

Views: 456

Answers (1)

jwatts1980
jwatts1980

Reputation: 7356

Since you are doing multiple things now, it would be better to break that change code into its own function. But basically you need to access the href attribute of the a tag the same way you are accessing the src on the img tag.

<script>
    var colorUrlMap = {
        "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
        //Add more here
        "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value];
        document.getElementById('link_id').href = colorUrlMap[el.value];
    }
</script>
<select name="Color:" onchange="changeSelect(this)">
    <option value="Black/White">Black/White</option>
    <!-- Add more here -->
    <option value="White/Red/Black">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

example:

<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

You may notice that I also gave the a an id value.

update

If you need to get that link from somewhere else, here is a possible alternative way to write your script. I added another level of properties to each color item: a src and href to match the attribute names you are updating on the a and img tags.

<script>
    var colorUrlMap = {
        "Black/White" : {
            "src" : "images/taylormade_purelite_standbag_bk.jpg",
            "href" : "your link here"
        },
        //Add more here
        "White/Red/Black" : {
            "src" : "images/taylormade_purelite_standbag_wrb.jpg",
            "href" : "your other link here"
        }
    };

    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
</script>

update 2

To address the question in the comments about radio buttons, yes. From your code example, currently you have a form submission on the onclick event of the radio. You would need to change that. The trick with radio buttons however, is that you only want to use the value of the selected radio. If you use the onchange event on the radio, it will fire both when it is selected and deselected.

So if you want to use the same function for both radios and selects, you can wrap the setter lines in an if statement:

function changeColor(el) {
    if (el.nodeName != "INPUT" || el.checked) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
}

This should work on select, input[type=radio], and input[type=checkbox]. You can put it in a onclick, onchange, or onkeyup handler. (onkeyup is good when the keyboard is used to change the values.)

Upvotes: 1

Related Questions