Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ CHANGING IMAGE
Posted by: Mattab0lism Jun 19 2018, 08:10 PM
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>
Posted by: pandy Jun 19 2018, 09:10 PM
Maybe that you use the same variable name (image_tracker) in both scripts.
Posted by: 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
Posted by: Mattab0lism Jun 20 2018, 12:05 PM
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
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
Posted by: Christian J Jun 20 2018, 03:32 PM
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):
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.
Posted by: Mattab0lism Jun 22 2018, 11:30 AM
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):
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.
Posted by: Christian J Jun 23 2018, 03:57 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.
Posted by: Christian J Jun 24 2018, 09:24 AM
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.
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">
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)