CHANGING IMAGE |
CHANGING IMAGE |
Mattab0lism |
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
<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 |
Jun 19 2018, 09:10 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Maybe that you use the same variable name (image_tracker) in both scripts.
|
Christian J |
Jun 20 2018, 06:53 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,649 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 --> |
Mattab0lism |
Jun 20 2018, 12:05 PM
Post
#4
|
Group: Members Posts: 5 Joined: 16-June 18 Member No.: 26,660 |
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 |
Jun 20 2018, 03:32 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,649 Joined: 10-August 06 Member No.: 7 |
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 |
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'?
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. |
Christian J |
Jun 23 2018, 03:57 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,649 Joined: 10-August 06 Member No.: 7 |
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 |
Jun 24 2018, 09:24 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,649 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"> |
Lo-Fi Version | Time is now: 17th April 2024 - 02:30 AM |