You are here:   Home
Register   |  Login

Captured Technology - Blog

Minimize

JavaScript OnMouseOver for Firefox

by Steve Patterson on Friday, April 10, 2009 11:26 AM

JavaScript OnMouseOver for Firefox

I wrote a fairly simple JavaScript line to modify the size of an image when there is a OnMouseOver  event. And then wrote a similar line of JavaScript to reduce the size back to normal on the OnMouseOut event. The only problem is the JavaScript didn't work on FireFox although it was great with Internet Explorer. After some research I found that using the 'this' object was needed with FireFox. So I adjusted my code to also have the events in the image object itself. Here is the code:

 

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" height="700px" width="215px">
    <tr height="140px" width="195px" align="center">
    <td><a href="AboutUs.aspx" 
        onmouseover="document.getElementById('AboutUs').style.width='205px'; document.getElementById('AboutUs').style.height='112px'" 
        onmouseout="document.getElementById('AboutUs').style.width='195px'; document.getElementById('AboutUs').style.height='105px'">
        <img border="0" alt="About Us" src="/Images/Home/AboutUs.gif" style="height: 105px; width:195px; position: static;" id="AboutUs" 
        onmouseover="this.style.width='205px'; this.style.height='112px'" 
        onmouseout="this.style.width='195px'; this.style.height='105px'" />    
    </a></td></tr>
</table>
</div>

Author
Steve Patterson

Latest technology news.

17 comment(s) so far...

Anonymous 4/15/2009

Amazing blog! Why can't you write for our blog :(.

 
Anonymous 4/15/2009

Interesting idea and well implement but would it not be better to swap images instead, replacing the smaller one with a bigger one?<br><br>That way you'd not get any image quality issues with resizing.

 
Anonymous 4/15/2009

So does this work on Firefox and IE?<br><br>If so it could be a neat solution.<br>

 
Anonymous 4/15/2009

From my understanding it should work on both browsers

 
Anonymous 4/19/2009

Thanks for the code. I've been having the same problem with firefox. Great work.

 
Anonymous 4/20/2009

I am just looking for this, good post and thanks for the code.

 
Anonymous 4/21/2009

Wow, Nice job. Maybe you can share a sample of your code or application of the javascript you made.<br><br>

 
Anonymous 4/23/2009

Thanks, this was a real life saver for my mario flash games site :)

 
Anonymous 4/28/2009

Thanks for providing the code.

 
Anonymous 4/30/2009

Thanks for sharing the codes. I've been having the same problem when I'm using both Firefox and Internet explorer. I hope this time that both will work.

 
Anonymous 5/4/2009

Good modification done.Hope it's working well now.

 
Anonymous 7/9/2009

Awesome, I was trying to figure out how to do that and this worked like a charm!

 
Anonymous 9/25/2009

thanks for the coder , i have saved the code for my work use :)

 
Anonymous 10/21/2009

it's very nice, thanks for the code

 
Anonymous 10/30/2009

Thanks for your code.

 
Anonymous 10/30/2009

Thanks for sharing the code

 
Anonymous 11/29/2009

Great thanks for such a useful information as that one!<br>Grateful a lot!

FaceBook

Minimize

Translate

Minimize

Sponsors

Minimize

Categories

Minimize