Need help - JS - single image reload onMouseOver
I am just an amature trying to come up with a "new" way to present photographs on the web.
My sandbox website: Random Graffiti
I salvaged two different simple javascripts to reload single images onMouseOver without reloading entire page (scripts are visible in the source). Image links lead to a php image rotator, so on each mouseover a new graffiti will show on the wall.
PROBLEM: scripts work as intended only in IE6, but won't run in any modern browser (checked Firefox, Opera, Netscape). Please suggest a simple modification to allow cross-browser support.
I wish I could give you something valuable for your help.. but right now I can only promise a "thank you" note with a link on my "credits/links" page (well, eventually
Thank you very much though..
Abhishek Reddy posted this at 09:05 — 16th October 2006.
He has: 3,348 posts
Joined: Jul 2001
As one of your images says, randomness is the key.
When you try to set the image's source to "/message.php", Firefox notices that it's the same as string as before and doesn't bother sending a new request. So you need to set a different string upon mouseOver each time; Math.random() can help:
document[img_name].src = img_src + "?" + Math.random();'That will set the src to strings like "/message.php?0.1356611673625886". Everything after the ? is inconsequential to the PHP script, but ensures that Firefox will send a request.
Also, instead of using document[img_name], set an id value in the img tag instead of a name, and use document.getElementById(img_id). This is the preferred standard selector -- it won't break in modern browsers (I like your wording
).
function roll_over(img_id, img_src){
document.getElementById(img_id).src = img_src + "?" + Math.random();
}
<a href="http://www.meignorant.com" onmouseover="roll_over('caveart', '/message.php')"><img src="/message.php" id="caveart" alt="CaveArt"></a>
Note that I've only tested the solution in Firefox. If it doesn't work in Opera or others, post back.
lazycat posted this at 10:34 — 16th October 2006.
He has: 10 posts
Joined: Oct 2006
Abhishek, thank you! thank you! thank you! For fast and comprehensive reply! I checked the code in all popular browsers - works flawlessly.
I'll defenitely stick around on this forum, and once I get some sleep (I am just a sorry-*** immigrant working night shift ) I'll put a link to this post.. and if you ever need to create a sketch from a photo or do some crazy photo manipulation, just let me know
Abhishek Reddy posted this at 12:15 — 16th October 2006.
He has: 3,348 posts
Joined: Jul 2001
Glad I could help.
For the record, another way to do this would be to reset the src to "" (empty string), some other noise, or a cached (maybe transparent) image, and then switch back to img_src.
The only danger with these alternatives is the browser may decide (maybe in a future version) to get smart and behave as before, where nothing changed. Having it evaluate Math.random() and return a value avoids the risk entirely as the browser can't take 'deterministic' shortcuts.
There's no need for that.
And welcome to TWF. Why don't you drop by the Introductions section and properly introduce yourself?
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.