469,332 Members | 6,650 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > firefox doesn't process onmousemove

Post your question to a community of 469,332 developers. It's quick & easy.

Firefox doesn't process onmousemove

Hi.

Please take a look at this page:
http://tinyurl.com/s2l8w

In IE6, putting the mouse on each of the two items highlights the word
in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
nothing shows when mouse goes over it. Please view the source of that
simple page (with some JavaScript) to see if you know how I can get
this to look in Firefox like it does in IE?

Thanks.

Sep 5 '06 #1
7 6264
Please also let me know if there is another newsgroup that I should
post this sort of question to. Thanks.

80********@videotron.ca wrote:
Hi.

Please take a look at this page:
http://tinyurl.com/s2l8w

In IE6, putting the mouse on each of the two items highlights the word
in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
nothing shows when mouse goes over it. Please view the source of that
simple page (with some JavaScript) to see if you know how I can get
this to look in Firefox like it does in IE?

Thanks.
Sep 5 '06 #2
80********@videotron.ca said the following on 9/4/2006 9:33 PM:
Hi.

Please take a look at this page:
http://tinyurl.com/s2l8w

In IE6, putting the mouse on each of the two items highlights the word
in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
nothing shows when mouse goes over it. Please view the source of that
simple page (with some JavaScript) to see if you know how I can get
this to look in Firefox like it does in IE?
The problem is that your script is written for IE/NN4 era browsers using
document.layers and document.all. The only reason it even works in IE is
that it still supports document.all and the test for it. Firefox has
limited supported for document.all but it will fail on an
if(document.all) test. Although I personally don't see any reason at all
for using either one.

You use the images collection in the imgoff function but for some reason
you use document.layers/document.all in the imgon function.

I also don't see why you are having so many different function calls for
a simple rollover effect.

function swapImage(imgRef,newSource){
imgRef.src = newSource;
}

And call it as such:

<img src="originalImage.jpg"
onmouseover="swapImage(this,'newImageSrc.jpg')"
onmouseout="swapImage(this,'originalImage.jpg')"
>
The problem with the approach you have now is that when there are many
images on the page, your imgoff function will have to loop through all
the images and set them when it doesn't need to. The only image that
won't be in a default state is the one that has the mouse over it. When
you mouseout, you change it back.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 5 '06 #3
Hi. And thanks for your response.

I just copied that as I was learning many years ago. Time to revise.

So I just have this code now but IE gives script errors when I put my
mouse over the bitmaps. What did I miss:

<HTML>
<HEAD>
<script language="JavaScript" type="text/JavaScript">
<!--
function swapImage(imgRef,newSource){
imgRef.src = newSource;
}
// -->
</script>
<TITLE>Sample</TITLE>
</HEAD>
<BODY bgcolor="Black"><font size="-1"><BR></font>
<table border="0">
<tr>
<td><img src="images/home.jpg" width=80 height=35 alt="Main Page"
border="0"
onmouseover="SwapImage(this,'images/homeon.jpg'),window.status='Main
Page'" onmouseout="SwapImage(this,'images/home.jpg'),
window.status=''"></td>
<td><img src="images/arcade.jpg" width=100 height=35 alt="Classic
Arcade Machines" border="0"
onmouseover="SwapImage(this,'images/arcadeon.jpg'),window.status='Classic
Arcade Machines'"
onmouseout="SwapImage(this,'images/arcade.jpg'),window.status=''"></td>
</tr>
</table>
</BODY>
</HTML>
Thanks.
Randy Webb wrote:
80********@videotron.ca said the following on 9/4/2006 9:33 PM:
Hi.

Please take a look at this page:
http://tinyurl.com/s2l8w

In IE6, putting the mouse on each of the two items highlights the word
in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
nothing shows when mouse goes over it. Please view the source of that
simple page (with some JavaScript) to see if you know how I can get
this to look in Firefox like it does in IE?

The problem is that your script is written for IE/NN4 era browsers using
document.layers and document.all. The only reason it even works in IE is
that it still supports document.all and the test for it. Firefox has
limited supported for document.all but it will fail on an
if(document.all) test. Although I personally don't see any reason at all
for using either one.

You use the images collection in the imgoff function but for some reason
you use document.layers/document.all in the imgon function.

I also don't see why you are having so many different function calls for
a simple rollover effect.

function swapImage(imgRef,newSource){
imgRef.src = newSource;
}

And call it as such:

<img src="originalImage.jpg"
onmouseover="swapImage(this,'newImageSrc.jpg')"
onmouseout="swapImage(this,'originalImage.jpg')"
>

The problem with the approach you have now is that when there are many
images on the page, your imgoff function will have to loop through all
the images and set them when it doesn't need to. The only image that
won't be in a default state is the one that has the mouse over it. When
you mouseout, you change it back.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 5 '06 #4
Doh, ok, I capitalized Swap by mistake. Works now.
So now I will work on what do I do to keep the rollover image on when I
click on an item (which eventually takes me to a html page)?
Onclick....

Thanks.

80s.arc...@videotron.ca wrote:
Hi. And thanks for your response.

I just copied that as I was learning many years ago. Time to revise.

So I just have this code now but IE gives script errors when I put my
mouse over the bitmaps. What did I miss:

<HTML>
<HEAD>
<script language="JavaScript" type="text/JavaScript">
<!--
function swapImage(imgRef,newSource){
imgRef.src = newSource;
}
// -->
</script>
<TITLE>Sample</TITLE>
</HEAD>
<BODY bgcolor="Black"><font size="-1"><BR></font>
<table border="0">
<tr>
<td><img src="images/home.jpg" width=80 height=35 alt="Main Page"
border="0"
onmouseover="SwapImage(this,'images/homeon.jpg'),window.status='Main
Page'" onmouseout="SwapImage(this,'images/home.jpg'),
window.status=''"></td>
<td><img src="images/arcade.jpg" width=100 height=35 alt="Classic
Arcade Machines" border="0"
onmouseover="SwapImage(this,'images/arcadeon.jpg'),window.status='Classic
Arcade Machines'"
onmouseout="SwapImage(this,'images/arcade.jpg'),window.status=''"></td>
</tr>
</table>
</BODY>
</HTML>
Thanks.
Randy Webb wrote:
80********@videotron.ca said the following on 9/4/2006 9:33 PM:
Hi.
>
Please take a look at this page:
http://tinyurl.com/s2l8w
>
In IE6, putting the mouse on each of the two items highlights the word
in a blue (different image) and shows a tool tip. In Firefox(1.5.0.6),
nothing shows when mouse goes over it. Please view the source of that
simple page (with some JavaScript) to see if you know how I can get
this to look in Firefox like it does in IE?
The problem is that your script is written for IE/NN4 era browsers using
document.layers and document.all. The only reason it even works in IE is
that it still supports document.all and the test for it. Firefox has
limited supported for document.all but it will fail on an
if(document.all) test. Although I personally don't see any reason at all
for using either one.

You use the images collection in the imgoff function but for some reason
you use document.layers/document.all in the imgon function.

I also don't see why you are having so many different function calls for
a simple rollover effect.

function swapImage(imgRef,newSource){
imgRef.src = newSource;
}

And call it as such:

<img src="originalImage.jpg"
onmouseover="swapImage(this,'newImageSrc.jpg')"
onmouseout="swapImage(this,'originalImage.jpg')"
>
The problem with the approach you have now is that when there are many
images on the page, your imgoff function will have to loop through all
the images and set them when it doesn't need to. The only image that
won't be in a default state is the one that has the mouse over it. When
you mouseout, you change it back.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 5 '06 #5
80********@videotron.ca said the following on 9/4/2006 11:34 PM:
Doh, ok, I capitalized Swap by mistake. Works now.
So now I will work on what do I do to keep the rollover image on when I
click on an item (which eventually takes me to a html page)?
Onclick....
If you are navigating away from the page, then it won't matter will it?

onclick="thisClicked(this,'clickedImage.jpg')"

function thisClicked(elemClicked,newSrc){
elemClicked.onmouseover=null;
elemClicked.onmouseout=null;
elemClicked.src = newSrc;
}

That will remove the onmouseover and onmouseout event handlers from the
image so that mousing over them won't change them anymore.

Still not sure what the point of making an image change when navigating
away though.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 5 '06 #6
Oh, let me explain more. This is the top page of a simple frame based
page. So click on those items will change the bottom frame. Hence,
when click on the Arcade item, I would put a new frame at the bottom
and I wanted the Arcade item image to remain to the 'on' one. At this
point, moving my mouse over the Home would make it highlight but moving
the mouse over the Arcade would do nothing as it is on that frame
already. Clicking on Home would then highlight Home permanently with
the 'on' image and undo the Arcade 'on' image. Thanks.

Randy Webb wrote:
80********@videotron.ca said the following on 9/4/2006 11:34 PM:
Doh, ok, I capitalized Swap by mistake. Works now.
So now I will work on what do I do to keep the rollover image on when I
click on an item (which eventually takes me to a html page)?
Onclick....

If you are navigating away from the page, then it won't matter will it?

onclick="thisClicked(this,'clickedImage.jpg')"

function thisClicked(elemClicked,newSrc){
elemClicked.onmouseover=null;
elemClicked.onmouseout=null;
elemClicked.src = newSrc;
}

That will remove the onmouseover and onmouseout event handlers from the
image so that mousing over them won't change them anymore.

Still not sure what the point of making an image change when navigating
away though.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 5 '06 #7
80********@videotron.ca said the following on 9/4/2006 11:57 PM:
Oh, let me explain more. This is the top page of a simple frame based
page. So click on those items will change the bottom frame. Hence,
when click on the Arcade item, I would put a new frame at the bottom
and I wanted the Arcade item image to remain to the 'on' one. At this
point, moving my mouse over the Home would make it highlight but moving
the mouse over the Arcade would do nothing as it is on that frame
already. Clicking on Home would then highlight Home permanently with
the 'on' image and undo the Arcade 'on' image. Thanks.
The best that you could do would be to try to set a flag when navigation
happens and then check that flag onmouse* to see whether to trigger the
rollover effect.

onclick - change the image, reset all others, set a flag variable.
onmouseover - check the variable and act.

The flag variable could be set to the ID/NAME of the image that got
clicked. If the current mouseover is that image, then do nothing.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 7 '06 #8

This discussion thread is closed

Start new discussion

Replies have been disabled for this discussion.

Similar topics
Why does this use all cpu in FireFox?
4 posts views Thread by Schraalhans Keukenmeester | last post: by
Mozilla Firefox compatibility problem
36 posts views Thread by Simon Wigzell | last post: by
Why won't the following work in FireFox?
2 posts views Thread by Nathan Sokalski | last post: by
firefox compatibility
1 post views Thread by inteli | last post: by
What is JavaScript?
1 post views Thread by CARIGAR | last post: by
hadr monitor script
reply views Thread by suresh191 | last post: by
If I select a checkbox
1 post views Thread by haryvincent176 | last post: by
Payroll Program
reply views Thread by Marylou17 | last post: by
Payroll Program
1 post views Thread by Marylou17 | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.