The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CHANGING IMAGE
Mattab0lism
post Jun 19 2018, 08:10 PM
Post #1





Group: Members
Posts: 5
Joined: 16-June 18
Member No.: 26,660



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 19 2018, 09:10 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,023
Joined: 9-August 06
Member No.: 6



Maybe that you use the same variable name (image_tracker) in both scripts.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 20 2018, 06:53 AM
Post #3


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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 -->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mattab0lism
post Jun 20 2018, 12:05 PM
Post #4





Group: Members
Posts: 5
Joined: 16-June 18
Member No.: 26,660



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 20 2018, 03:32 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mattab0lism
post Jun 22 2018, 11:30 AM
Post #6





Group: Members
Posts: 5
Joined: 16-June 18
Member No.: 26,660



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 23 2018, 03:57 PM
Post #7


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 24 2018, 09:24 AM
Post #8


.
********

Group: WDG Moderators
Posts: 7,915
Joined: 10-August 06
Member No.: 7



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">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th October 2018 - 09:33 AM