CHANGING IMAGE Options

[Mattab0lism]

Can someone point out what code is stopping these two parts working alongside eachother please


<div>
<!IMAGE SWAPPER>
<script type="text/javascript" id="1">
var image_tracker = 'POSTER1';
function change(){
var image = document.getElementById('P1');
if(image_tracker=='POSTER1'){
image.src='images/2018-06-17 15.21.07 4.png';
image_tracker='POSTER2';
}
else{
image.src='images/1_0000.gif';
image_tracker='POSTER1';
}
}
</script>
</div>
<div>
<!IMAGE SWAPPER>
<script type="text/javascript" id="2">
var image_tracker = 'POSTER3';
function change(){
var image = document.getElementById('P2');
if(image_tracker=='POSTER3'){
image.src='images/arikara.png';
image_tracker='POSTER4';
}
else{
image.src='images/arikara.gif';
image_tracker='POSTER3';
}
}
</script>
</div>

[Christian J]

Also there are two functions with the same name. For just a few IMG elements, you might create separate functions and variable names, but if there's a lot of them you might use a single function and e.g. pass each IMG element ID as the function argument.

Also, <!IMAGE SWAPPER> is invalid HTML, that should propably be

CODE

<!-- IMAGE SWAPPER -->

[Mattab0lism]

Also there are two functions with the same name. For just a few IMG elements, you might create separate functions and variable names, but if there's a lot of them you might use a single function and e.g. pass each IMG element ID as the function argument.

Also, <!IMAGE SWAPPER> is invalid HTML, that should propably be

CODE

<!-- IMAGE SWAPPER -->

THANKS! By creating a separate ones they now work It would be more efficient as a single function but im not sure how to make arguements

[Christian J]

You're welcome!

It would be more efficient as a single function but im not sure how to make arguements

See here for an example: http://www.quirksmode.org/js/function.html

But here's another idea that instead stores the image on/off URLs in a nested array (called toggle_arr below):

CODE

<script type="text/javascript">
window.addEventListener('load', function()
{
    // list image URLs here, one pair for each IMG element:
    var toggle_arr=[
    ['dog.jpg','cat.jpg'],
    ['dog.jpg','cat.jpg'],
    ];

    var toggle=document.getElementsByClassName('toggle');

    for(var i=0; i<toggle.length; i++)
    {
        toggle[i].counter=i;
        toggle[i].swapped=0;
        toggle[i].onclick=function()
        {
            if(this.swapped==0)
            {
                this.src=toggle_arr[this.counter][1];
                this.swapped=1;
            }
            else
            {
                this.src=toggle_arr[this.counter][0];
                this.swapped=0;
            }
        }
    }
}, false);
</script>

Click image to toggle:

<img src="dog.jpg" width="100" height="50" alt="" class="toggle">
<img src="dog.jpg" width="100" height="50" alt="" class="toggle">

Note that you toggle these images by clicking on them, if you want to use some other method like clicking a button the script must be rewritten.

[Mattab0lism]

This is great! Thanks! Is there a way of changing the dimensions of the 'cat'?

You're welcome!

It would be more efficient as a single function but im not sure how to make arguements

See here for an example: http://www.quirksmode.org/js/function.html

But here's another idea that instead stores the image on/off URLs in a nested array (called toggle_arr below):

CODE

<script type="text/javascript">
window.addEventListener('load', function()
{
    // list image URLs here, one pair for each IMG element:
    var toggle_arr=[
    ['dog.jpg','cat.jpg'],
    ['dog.jpg','cat.jpg'],
    ];

    var toggle=document.getElementsByClassName('toggle');

    for(var i=0; i<toggle.length; i++)
    {
        toggle[i].counter=i;
        toggle[i].swapped=0;
        toggle[i].onclick=function()
        {
            if(this.swapped==0)
            {
                this.src=toggle_arr[this.counter][1];
                this.swapped=1;
            }
            else
            {
                this.src=toggle_arr[this.counter][0];
                this.swapped=0;
            }
        }
    }
}, false);
</script>

Click image to toggle:

<img src="dog.jpg" width="100" height="50" alt="" class="toggle">
<img src="dog.jpg" width="100" height="50" alt="" class="toggle">

Note that you toggle these images by clicking on them, if you want to use some other method like clicking a button the script must be rewritten.