View Full Version : cross platform mouse image rollover...?

08-22-2004, 07:29 PM
Hi all,

Just wodnering if anyone can point me in the right direction here, i've got this line ok:

<a onmouseover="imgone.src='images/new/2dark.jpg'" onmouseout="imgone.src='images/new/2light.jpg'" href="#"><img class="galink" src="images/new/2light.jpg" border="1" name="imgone" color="ff0000" /></a>

Now why does firefox 0.8 for windows NOT do the mouseover? Please bare in mind that I am eventually going to code the whole site in ASP.NET, but this mouseover for an image should be simple, I can't find a solution for it anywhere.



08-22-2004, 07:52 PM
Because the code is wrong. IE sees all of the names in the document level and that is why you can reference the name with it. The others can not do it that way.

If you change the code too....


it should work.


08-22-2004, 10:51 PM
don't work mate :confused: any more suggestions?

08-22-2004, 11:34 PM
Gecko DOM Reference (http://www.mozilla.org/docs/dom/domref/)

08-23-2004, 12:19 AM
I have: Mozilla/5.0, Firefox/0.9.3 and this code works fine.

The correct way is to access it via the DOM though...or rather, that is the wrong syntax for accessing it via the DOM.

Just curious, do you have a doc-type declared in your page?


Willy Duitt
08-23-2004, 12:24 AM
There's no associated ID's to use with document.getElementById....
Try this: onmouseover="document.images['imgone'].src=......

However, I do not understand why you are even using an anchor when placing the mouse events directly on the imagage would allow you to pass the image src using the keyword this....

IE: <img onmouseover="this.src=.....


08-23-2004, 12:45 AM
<img onmouseover="this.src=.....

I've always stuck to the old method, because I like the cursor to indicate that something is supposed to happen when the image is moused over...yeah, I know...too lazy to add: style="cursor:pointer;" :eek:


Willy Duitt
08-23-2004, 01:40 AM
Well in this case there is already a class assigned to the images so one additional declaration of : cursor:pointer; would work across all images in the class...

However, this brings up another mystery which is: Why isn't the border and border color also included within the style....

<img name="imgone" class="galink" src="images/new/2light.jpg" border="1" color="ff0000" />

Here's what I advise using:
(mouse events will work on all light/dark images)

<style type="text/css">
img.galink { border-style: solid;
border-color: #FF0000;
border-width: 1px;
cursor: pointer;
cursor: hand;

<img class="galink" src="images/new/2light.jpg"
onmouseout ="this.src=this.src.replace(/dark/i,'light')" />


08-23-2004, 08:31 PM
interesting thread... thank you, i think the css way will work, i know, i've made a couple of mistakes. i'm on the case.

keep the comments coming, this is by far the most helpful forum i've ever come across, keep up the good work peeps :thumbsup:

08-23-2004, 09:02 PM
Or you could just leave it wrapped in <a href="#"></a>. Though, if clicking the images isn't actually going to do anything, then use the cursor: property.