Change image src by using multiple select

Question

I would like to change image using multiple select.

Referring to the QUESTION The structure will be exactly the same as the above code.

But using <select> and <option> is not suitable for my case. I would like to use <ul> and <li> (or <div> and <a> )instead. I have tried to edit with it, but the javascript cannot recognize the value.

I am totally new to javascript. And I don't know how to modify the code. Please help and many thanks.

Here's the html:

<img id="imageToSwap" src="img/red.jpg">

<select id="colour" onChange="swapImage()">
    <option value="red">Red</option>
    <option value="green">Green</option>
</select>

<select id="size" onChange="swapImage()">
    <option value="small">Small</option>
    <option value="large">Large</option>
</select>

script:

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;

        image.src = "img/" + size + "_" + color + ".jpg";
    };
</script>

Answer 1

You can do it in different ways. I will propose mine using data attributes to store src values. Consider this code.

HTML:

<img id="imageToSwap" src="http://lorempixel.com/100/100/nature/4">

<ul class="select">
    <li class="option active" data-value="http://lorempixel.com/100/100/nature/4">Red</li>
    <li class="option" data-value="http://lorempixel.com/100/100/nature/1">Green</li>
    <li class="option" data-value="http://lorempixel.com/100/100/nature/2">Yellow</li>
</ul>

and JS:

var $image = $('#imageToSwap');

$('.select').on('click', '.option', function() {
    $image.prop('src', $(this).data('value'));
    $(this).addClass('active').siblings().removeClass('active');
});

Demo: http://jsfiddle.net/8f669/

UPD Support multiple selects

var $image = $('#imageToSwap');

var $selects = $('.select').on('click', '.option', function() {
    $(this).addClass('active').siblings().removeClass('active');

    var src = 'http://lorempixel.com/{size}/{size}/{group}/{image}';
    $selects.each(function() {
        src = src.replace(RegExp('\\{' + $(this).data('name') + '\\}', 'g'), $(this).find('.active').data('value'));
    });
    $image.prop('src', src);
});

Note how src is constructed. 'http://lorempixel.com/{size}/{size}/{group}/{image}'. It has tokens corresponding to select lists. It brings maximal flexibility. You jsut add new select list with proper data-name="xxx" attribute, and here we go, you can use token {xxx} in src url.

Demo: http://jsfiddle.net/8f669/2/

Answer 2

This support multiple condition. You should set a default value in the ul's data-selected (or in the swapImage function if any data-selected is empty).

Demo: http://jsfiddle.net/t49jQ/1/

CSS

li {
    cursor: pointer;
}

HTML:

<img id="imageToSwap" src="">

<ul id="color" data-selected=''>
    <li data-color='red' onClick="swapImage(this,1)">Red</li>
    <li data-color='green' onClick="swapImage(this,1)">Green</li>
</ul>

<ul id="size" data-selected=''>
    <li data-size='small' onClick="swapImage(this,2)">Small</li>
    <li data-size='big' onClick="swapImage(this,2)">Big</li>
</ul>

JS:

function swapImage(el,type){

        var el_color = document.getElementById("color");
        var el_size = document.getElementById("size");
        var image = document.getElementById("imageToSwap");

        if (type == 1) {    
            el_color.setAttribute('data-selected',el.getAttribute('data-color'));

        } else if (type == 2) {
            el_size.setAttribute('data-selected', el.getAttribute('data-size'));
        }

        image.src = "img/" + el_size.getAttribute('data-selected') + "_" + el_color.getAttribute('data-selected') + ".jpg";

    };

Answer 3

here is the code using ul li and jquery

<img src="" id="image_tag"/>

 <ul id="test">
  <li data-image="img/test.jpg">Image 1</li>
  <li data-image="img/test1.jpg">Image 2</li>
</ul>


 <script>
   $(function(){
     $('#test li').click(function(){
         $('#image_tag').attr('src',$(this).data('image'));
     });
   });
 </script>