How can I reload an image using Javascript?

[latino.ad7]

I have an image and below it a few links. I would like to reload the image when someone clicks on the link. The code is PHP/HTML and I'd like to inject Javascript into it.

 

Can someone help and advise?

[developerdave]

Your looking for a jQuery click event.

 

Assuming you've already been to jquery.com and downloaded it and included it.

 

$(document).ready(function(){
         $('.link').click(function(){
                 $('#imagecontainer').attr({'src':'urlofnewimage'});
                 return false;
         });
});

[seventheyejosh]

<img src="test.png" id="myImage">

<br />

<a href="#" onclick="document.getElementById('myImage').src='somethingelse.png';">Click Me</a>

 

EDIT: I agree that jQuery is much nicer, although telling someone to go use a framework won't help them learn the underlying principles of javascript.

 

And, for latino, it is worth noting that .link will bind to any thing with a class of link, if you use that and you want different links to do different things, make sure to use # instead, just as the css selectors work, . = class # = id.

[latino.ad7]

Thank you. The # method works nice, but when I click the links, the page returns to the top. I have many thumbnails and when I click on one the main big pisture changes. And at that time the page returns to the top.

 

How can I do it, so that it remains scrolled to when I was?

[developerdave]

Return false will kill any link activity

 

<img src="test.png" id="myImage">

<br />

<a href="#" onclick="document.getElementById('myImage').src='somethingelse.png'; return false;">Click Me</a>

[seventheyejosh]

<img src="test.png" id="myImage">

<br />

<a href="javascript:document.getElementById('myImage').src='somethingelse.png';">Click Me</a>

[developerdave]

Seventheyejosh is on ball today his would be better for you

[seventheyejosh]

Oh yea...

 

lol!

[developerdave]

In all fairness they both will work lol. Just his is cleaner

[latino.ad7]

Thanks. It works nice.

 

But I still have a problem. Actually 2 problems:

 

1. I have a small, thumbnail version of the same picture on the bottom of the page. I would like it to change as well. I tried adding id="myImage", but it didn't work. in other words, a single click would change 2 pictures: the main one and a small one.

 

2. I would like to have PHP variable, which would change based on what picture is displayed. This variable holds the name of a file 9different name than the picture, but which changes accordingly), which is displayed on the page in a form of a link.

[ohdang888]

1. I have a small, thumbnail version of the same picture on the bottom of the page. I would like it to change as well. I tried adding id="myImage", but it didn't work. in other words, a single click would change 2 pictures: the main one and a small one.

 

assign it a different id. and use a js function....like so:

<script>
function reloadImages(){
document.getElementById('firstID').src='url.png';
document.getElementById('secondID').src='url2.png';
}
</script>
<a href="javascript:reloadImages();">Test</a>
<img id="firstID" src="test.png"/>
<img id="secondID"  src="test2.png"/>

 

And for your second issue: I'm more than fine helping, but i'm not going to write all your code for you. Give it a try, and post your problems in the PHP forum when you encounter them.

 

However, the way you are wording that issue (#2) makes me think you're not sure about the different between Javascript and PHP. JS is client side, PHP is server side, they happen at different times. So in order to interact between the 2, you much echo (with PHP) the data you want into JS vars, and if you want JS to give data to PHP, you must reload the page with a new url containing the info, or with AJAX

 

[latino.ad7]

Thanks. That actually solves it. I was trying to find the way not to reload the page, but just change the picture. You're right, if I want to establish some PHP variables, then the pages, where I want to do that need to be reloaded. On the other pages, I can use javascript just to change the picture.

 

Thanks.