...

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



dei9
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.

Heeeelp!

Thanks

A1ien51
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....

onmouseover="document.getElementById('imageID').src='imageName.gif'"

it should work.

Eric

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

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

jamescover
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?


-james

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=.....

.....Willy

jamescover
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:


-james

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;
}
-->
</style>
</head>

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


.....Willy

dei9
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:

AaronW
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum