Aqua-Soft ForumsDoes anyone know of a way to get images to change, kind of like the way the phoenix/safari toolbar buttons do it, but on a web page? If someone knows the JavaScript code for on-mouse-over or whatever it is, can you please give me a link to where I can find it? And also it needs to work with Mozilla, Phoenix, IE and Opera, if that's possible. Thanks.
Javascript Image Rollover
How's that work for ya?
Thanks, I'll give that a try!
Well it's not working, everything is the same as it was (no mouseover image shows, I mean it doesn't change images). This is what I put in the fieled:
<img onmouseover="this.src='themes/fiapple/images/home2.gif'" onmouseout="this.src='themes/fiapple/images/tab_HOME.gif'" src="../../unavailable.html" alt="Home Page" border="0"/>
Is that the correct way to do it?
I found a script that works really well if anyone is interested you can get it here:
Sorry for the slow reply, someone needed the phone, so I had to disconnect. Heh, I typed up the response, reconnected, and hit add reply.
<img src="../../unavailable.html" onMouseOver="this.src='./themes/fiapple/images/home2.gif'" onMouseOut="this.src='./themes/fiapple/images/tab_HOME.gif'" alt="Home Page" border="0" />
Try that.. the mouseover and mouseout commands might be case sensitive (plus I put a space before that forward slash at the end of the tag and moved the src so it's first)... otherwise I don't know what's wrong, because it works on the site I'm using. Another (somewhat roundabout) way to accomplish this is (if you're using the image as a link):
<a href="../../unavailable.html" onMouseOver="tab1.src='./themes/fiapple/images/home2.gif'" onMouseOut="tab1.src='./themes/fiapple/images/tab_HOME.gif'"><img src="../../unavailable.html" alt="Home Page" border="0" name="tab1" /></a>
Notice I gave the image a name="tab1" and told the mouseover to affect tab1.src instead of this.src.
Also note that every different image you use this on MUST have a different name (ie tab2, tab3), if there are two images with the same name it'll not work.
This is the way I used to do it before I realized I could just put it right in the tag... what browser are you using for this? I'm running IE 6.
This is the code that's in use on my page.
<a href="./index.html"><img src="../../unavailable.html" onmouseover="this.src='./link-main-over.gif'" onmouseout="this.src='./link-main-off.gif'" class="link" alt="[Main Page]" /></a>
(btw, that class="link" is for cascading style sheets, in case you're unfamiliar with them, it has no effect on the javascript)
-= Edit =-
Ah. I see you found a 'DHTML' solution. Cool, whatever works for ya. 