PDA

View Full Version : Image refresh onclick with javascript




joecool85
Aug 20, 2006, 01:39 PM
How would I go about having an image on my site that when clicked refreshes? I'd like to use javascript if possible.



FredClausen
Aug 20, 2006, 01:56 PM
I'm no JavaScript guru - can't code it to save my life - but a quick google search revealed the following:

http://www.irt.org/script/223.htm
here (http://72.14.209.104/search?q=cache:-kf38T96MFYJ:academ.hvcc.edu/~kantopet/old/javascript/index.php%3Fpage%3Djs%2Bimage%2Brollovers%26parent%3Dbasic%2Bdhtml+javascript+refresh+image+onclick&hl=en&gl=us&ct=clnk&cd=15&client=safari") (thats the google cache version, the non cache version doesn't work for some reason)

I think if you look at code examples for onmouseover events for swapping images and change onmouseover to onclick, it will work for you.

More googling for your pleasure (http://www.google.com/search?hl=en&lr=&client=safari&rls=en&q=javascript+refresh+image+onclick&btnG=Search)

rob finch
Aug 20, 2006, 03:45 PM
I think if you look at code examples for onmouseover events for swapping images and change onmouseover to onclick, it will work for you.

You can find an exact example of that here (http://www.w3schools.com/js/js_animation.asp). Change the event for the image to onClick, get it to call a function to refresh the source for the image to the same file it is initially set to. Should work.

joecool85
Aug 22, 2006, 02:56 PM
Ok...well, I tried this:

<html>

<head>
<title>Image reload page, thanks javascript!</title>

<script type="text/javascript" language="JavaScript">
function reloadImage()
{
img = document.getElementById('theimage');
img.src = '2.jpg?' + Math.random();
}
</script>

</head>
<body>

<img src="radar.jpg"
name="theimage" alt="radar image"
onclick="reloadImage();"
/>

</body>
</html>

But it won't load 2.jpg when you click it...anyone know why?

rob finch
Aug 22, 2006, 04:44 PM
function reloadImage()
{
img = document.getElementById('theimage');
img.src = '2.jpg?' + Math.random();
}


What are you trying to achieve with the random number? You will get returned "2.jpg?0.678864716868319" or similar for the source of the image, so it clearly won't load.

To see the value that you are getting back, pop up a dialogue box using the following in the function.

alert ("2.jpg?"+Math.random())

joecool85
Aug 22, 2006, 05:41 PM
I read that what that does is make sure the browsers thinks its loading a different picture (its made to be a refresh, I just have it set to two different pics for testing purposes).

rob finch
Aug 24, 2006, 05:19 PM
It won't load an image if you give it's source as something that doesn't exist as a path, i.e. "2.jpg?+random number".

Try just just using img.src = "2.jpg" in the function, it should cause it to load that picture. If that works, try restating the source as img src="radar.jpg", edit the picture and save it, then click the image to call the function.

cciapocka
Mar 3, 2011, 12:48 PM
The mistake is in name="theimage", in javascript you're looking for 'id'. Change the attribute 'name' to 'id' and it will be well.

joecool85
Mar 3, 2011, 01:57 PM
Wow...talk about dredging up old posts.

Thanks for the help. I've long ago figured it out though. :cool: