Reply
Changing image source with JS DOM
Old 02-14-2007, 07:38 PM Changing image source with JS DOM
Moldarin's Avatar
Extreme Talker

Latest Blog Post:
Keyword Density and Title Tags
Posts: 201
Trades: 0
Hi,

Can someone please show me how to change the src from first.gif to second.gif on hovering / selction wih JavaScript DOM?

HTML Code:
<img src="first.gif" alt="Some image" id="image" />
I have tried coding it myself, but I never quite get it to work so I would really like to see an example of how this is done.
__________________
I do not share ad revenue.
Moldarin is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 02-14-2007, 07:44 PM Re: Changing image source with JS DOM
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,942
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
document.getElementById("image").src = (your image source here.)
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 02-14-2007, 07:51 PM Re: Changing image source with JS DOM
Moldarin's Avatar
Extreme Talker

Latest Blog Post:
Keyword Density and Title Tags
Posts: 201
Trades: 0
But how about the hovering part?
__________________
I do not share ad revenue.
Moldarin is offline
Reply With Quote
View Public Profile
 
Old 02-14-2007, 08:29 PM Re: Changing image source with JS DOM
Moldarin's Avatar
Extreme Talker

Latest Blog Post:
Keyword Density and Title Tags
Posts: 201
Trades: 0
Why does this not work? I cannot find any errors and no debugging tools are of any help either...

HTML Code:
<script type="text/javascript">
window.onload = openload;
function openload() {
document.getElementById('image').onmouseout = runaway;
document.getElementById('image').onmouseover = runbox;
}
function runaway() {
document.getElementById('image').src = 'http://img245.imageshack.us/img245/8126/runboxug7.png';
}
function runbox() {
document.getElementById('image').src = 'http://img100.imageshack.us/img100/4387/runboxoverhb6.png';
}
</script>
__________________
I do not share ad revenue.
Moldarin is offline
Reply With Quote
View Public Profile
 
Old 02-14-2007, 08:58 PM Re: Changing image source with JS DOM
Learning Newbie's Avatar
Defies a Status

Latest Blog Post:
Astounding Republican Paranoia
Posts: 5,674
Name: John Alexander
Trades: 0
You're making this too copmlex. How 'bout <img src=x onmouseover=y onmouseout=z>? That will do it all for you, and not depend on the onload event.

Better yet though why don't you use CSS and bypass javascript all together?
Learning Newbie is offline
Reply With Quote
View Public Profile
 
Old 02-14-2007, 08:59 PM Re: Changing image source with JS DOM
Learning Newbie's Avatar
Defies a Status

Latest Blog Post:
Astounding Republican Paranoia
Posts: 5,674
Name: John Alexander
Trades: 0
You're making this too copmlex. How 'bout <img src=x onmouseover=y onmouseout=z>? That will do it all for you, and not depend on the onload event.

Better yet though why don't you use CSS and bypass javascript all together?
Learning Newbie is offline
Reply With Quote
View Public Profile
 
Old 02-14-2007, 10:54 PM Re: Changing image source with JS DOM
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,942
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
I've never been a fan of the CSS method personally. It doesn't cache images and can create a rather ugly delay effect. Javascript mouseovers have generally been much smoother. If you're going to do anything, do both.

I don't think onmouseover works on images either (although I've never tried.

You probably mean something like this.

<a href="#" onmouseover="runbox()" onmouseout="runaway()"><img src= ... ></a>

I've never seen a code sample like the one you've posted before. But I do know this way works...I've used it for years.
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Reply     « Reply to Changing image source with JS DOM
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.10265 seconds with 13 queries