Help - Search - Members - Calendar
Full Version: CHANGING IMAGE
HTMLHelp Forums > Programming > Client-side Scripting
Mattab0lism
Can someone point out what code is stopping these two parts working alongside eachother please smile.gif


<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>
pandy
Maybe that you use the same variable name (image_tracker) in both scripts.
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
QUOTE(Christian J @ Jun 20 2018, 06:53 AM) *

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 smile.gif It would be more efficient as a single function but im not sure how to make arguements
Christian J
You're welcome! smile.gif

QUOTE(Mattab0lism @ Jun 20 2018, 07:05 PM) *

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'?


QUOTE(Christian J @ Jun 20 2018, 03:32 PM) *

You're welcome! smile.gif

QUOTE(Mattab0lism @ Jun 20 2018, 07:05 PM) *

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.

Christian J
QUOTE(Mattab0lism @ Jun 22 2018, 06:30 PM) *

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

You mean of the second image? If you leave out WIDTH and HEIGHT from the IMG element it will adjust to the SRC image files, but it may cause some reshuffling especially during the initial page load.

You can also get the dimensions from the image files in javascript (and then apply them to the IMG element), but I recall it requires preloading each image as a javascript Image() object.
Christian J
This one uses the intrinsic dimensions of the preloaded image files (you may want to set the IMG elements' initial WIDTH and HEIGHT attributes to the same values as those of the initial image files). I haven't tested it from a web server, there might be bugs if an image hasn't finished preloading when you start clicking.

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 preload=new Array();
    for(var i=0; i<toggle_arr.length; i++)
    {
        preload[i]=new Image();
        preload[i].src=toggle_arr[i];
    }

    var toggle_img=document.getElementsByClassName('toggle');
    for(var i=0; i<toggle_img.length; i++)
    {
        toggle_img[i].counter=i;
        toggle_img[i].swapped=0;
        toggle_img[i].onclick=function()
        {
            if(this.swapped==0)
            {
                this.src=preload[i+1].src;
                this.width=preload[i+1].width;
                this.height=preload[i+1].height;
                this.swapped=1;
            }
            else
            {
                this.src=preload[i].src;
                this.width=preload[i].width;
                this.height=preload[i].height;
                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">
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.