Link to home
Create AccountLog in
Avatar of alicia1234
alicia1234Flag for United States of America

asked on

Why does onmouseover not work in Firefox?

Onmouseover works fine in IE7 but not in Firefox 1.5 - why? See attached code snippet. In IE, when you mouse over the image, the alternate image (eobhdr_h.gif) does appear, but in Firefox it does not.

<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1" 
	onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout="this.src = '/lookfeel/labels/eobhdr.gif' "/>

Open in new window

Avatar of seopro
seopro

Weird
That seems to work fine in the latest Firefox 2.0.0.12
Where can I download Firefox 1.5?
Avatar of alicia1234

ASKER

Old versions can be downloaded from this site:
http://www.filehippo.com/download_firefox/?1338
I have Firefox 1.5.0.6
I have 2.0.0.12 on another pc ... and I see the same problem there (onmouseover doesn't work).
Just downloaded 1.5.0.6 and it still works.
Do you have any scripts-related extensions installed?
I have the web developer tool bar on 1.5.0.6.
Nothing that I know of on 2.0.0.12
Perhaps because this:

onmouseout=/"this.src = '/lookfeel/labels/eobhdr.gif' ">

should be this:

onmouseout="this.src = '/lookfeel/labels/eobhdr.gif' ">
Thanks Badotz:

This is my code:

<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1"
      onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout="this.src = '/lookfeel/labels/eobhdr.gif' "/>
 

I don't see where you are seeing the syntax that you say is incorrect? There is no slash before "this.src". Thinking that maybe you meant the /> at the end is wrong, I tried just > and that didn't change anything (I really didn't think it would).

<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1" 
        onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout=/"this.src = '/lookfeel/labels/eobhdr.gif' ">
 
/*
the problem is in the final part of your command:
 
onmouseout=/"this.src = '/lookfeel/labels/eobhdr.gif' ">
           ^-- this is the slash I am talking about
*/

Open in new window

But that slash is not in the code that I posted. There is no slash where you say there is. and The command ends with  

/>

not just

>

This is the code that's in my page:
<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1" 
	onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout="this.src = '/lookfeel/labels/eobhdr.gif' "/>

Open in new window

>>But that slash is not in the code that I posted.

Look at line 2 in your code aove. What is the character immediately after " onmouseout="?

*THAT* IS THE SLASH I AM TALKING ABOUT!!!

Sheesh, some peoples' kids ;-)
I'm not trying to be difficult - I am a very reasonable and understanding person, having done customer support for years. But what's appearing on my screen is that the character immediately following "onmouseout=" is a double quote.

onmouseout="this.src =       ...

I do not see a slash sign. So there is no slash sign for me to delete. I'm sorry. Maybe someone else can take a look at this and see if they see the slash sign. But I sure do not.
Here is the offending line:

<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1"
        onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout=/"this.src = '/lookfeel/labels/eobhdr.gif' ">

Now can you see the slash?
Yes I can see the slash when you show it - but my originally posted code (and the code in my web page) does not have that slash. How is it that you found a slash?
I copy/paste the code from my original snippet window and this is what I see:

<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1"
      onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout="this.src = '/lookfeel/labels/eobhdr.gif' "/>
 
No slash.
Furthermore, my orginal code ends with /> while what you show ends only with a >.
So where are you picking the code from?
Dirctly from your initial post which, by the way, does not end with "/>" but with ">".

<img src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1"
        onmouseover="this.src = '/lookfeel/labels/eobhdr_h.gif' " onmouseout=/"this.src = '/lookfeel/labels/eobhdr.gif' ">
Well this is really strange. We both copy/paste the initial post and they both show different things. How weird is that? I have no explanation. I am completely confused about what is going on. I can assure you that the code in my page does not have a slash after "onmouseover=" and it ends with "/>", not ">"

All I know about your code I learned at EE ;-)

It might be something in the rendering engine of EE, but that is beyond my ken. You could post a question about this behavior in General Community Support < https://www.experts-exchange.com/Community_Support/General/ >.

You might consider changing your <img> element by extracting the script as in this grossly simplified version:


<html>
<head>
<script type='text/javascript'>
 
function mouse_over(this) {
    this.src = '\/lookfeel\/labels\/eobhdr_h.gif';
    return false;
}
// -------------------------------------
 
function mouse_out(this) {
    this.src = '\/lookfeel\/labels\/eobhdr.gif';
}
 
</script>
</head>
<body>
<img src='\/lookfeel\/labels\/eobhdr.gif' alt='evening bags evening purse' usemap='#Maphdr1' onmouseover='mouse_over(this);' onmouseout='mouse_out(this);'/>
</body>
</html>

Open in new window

Escaping the backslashes ('\/' instead of '/') might have been the problem all along.

And that is *not* a capital "V", but '\' + '/'.
Escaping the backslashes made no difference.
I inserted your code and after the page displayed and I hovered over the image, I got an error about an object being expected. I don't know Javascript so I can't trouble shoot it, nor am I asking you to.

The main point, however, is that way back in this post, seopro said it worked ok for him under FireFox. So that would lead me to believe it is not a code issue. Maybe something in the way Firefox is configured. But I have two pcs here with two different versions of Firefox and both exhibit the same problem. Both have default settings and no addons, except that 1.5.0.6 has the web developer toolbar.
Sorry, I must have missed an hour of sleep last night ;-)
<html>
<head>
<script type='text/javascript'>
 
function mouse_over(obj) {
    obj.src = '/lookfeel/labels/eobhdr_h.gif';
    return false;
}
// -------------------------------------
 
function mouse_out(obj) {
    obj.src = '/lookfeel/labels/eobhdr.gif';
    return false;
}
 
</script>
</head>
<body>
<img src='/lookfeel/labels/eobhdr.gif' alt='evening bags evening purse' usemap='#Maphdr1' onmouseover='mouse_over(this);' onmouseout=/'mouse_out(this);'>
</body>
</html>

Open in new window

Script works now but, again, only in IE and not Firefox. It's got to be something with my Firefox.

If you have Firefox and want to see if the mouseover works or not, go to this page and hover over "the eoBag" script header.

www.orangemooncreations.com/collection.cfm

ODDLY ENOUGH!! ... your code has a slash immediately following "onmouseout="   !!!
I removed it.
That has to be something with how EE displays the snippet.
Weird.

I'm giving up on this problem. ;-(
I tested the code in IE7, FF2.0.0.12 and Opera 9.26. The "ALT" info does not show in FF or Opera, but is does in IE.

I also modified the code slightly to only change the "src" attribute if it needs changing:

function mouse_over(obj) {
    if (obj.src != '/lookfeel/labels/eobhdr_h.gif') {
        obj.src  = '/lookfeel/labels/eobhdr_h.gif';
    }
    return false;
}
// -------------------------------------
 
function mouse_out(obj) {
    if (obj.src != '/lookfeel/labels/eobhdr.gif') {
        obj.src  = '/lookfeel/labels/eobhdr.gif';
    }
    return false;
}
ASKER CERTIFIED SOLUTION
Avatar of seopro
seopro

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
It worked in FF 2.0.0.12 for me - but not for you? Did you try "Clear Private Data" and reloading the page?
Are you using the code in my latest post? If not, show me your code.
I'm  talking about the following page:
http://www.orangemooncreations.com/collection.cfm
I've even tried to modify it to
<div id="prod1hdr" onMouseMove="document.getElementById('logo').src='/lookfeel/labels/eobhdr_h.gif'" onMouseOut="document.getElementById('logo').src='/lookfeel/labels/eobhdr.gif'">
      <img id="logo" src="/lookfeel/labels/eobhdr.gif" alt="evening bags evening purse" usemap="#Maphdr1"/>

(It seems like onMousemMove is more compatible with this doctype than onMouseover), But still, It worked in IE but didn't worked in FF.
seopro said:
"It doesn't work only on this page. It'll work fine if  I'll try it in a blank html file."

It also doesn't work here:
http://www.cookingwithalicia.com/

Over on the left, "Check out our Great Features" is supposed to change color when you hover the mouse over it.
FYI.

um.you mean over on the right, right alicia1234?
Have you tried moving the javascript out of the IMG element like I suggested?
yeah .. the other left!