View Full Version : Rollover not working in Firefox

02-20-2011, 04:26 AM

Does anyone have any idea why the rollovers are not working on the following 2 pages:



but yet they do work on this page:


I have updated JAVA and Flash to the latest versions.

The rollovers work fine in Chrome and IE

Any insight into this issue would be fantastic

02-20-2011, 07:58 AM
Not sure why it isn't working, but this is the error you get when I run firebug:
The "coords" attribute of the <area shape="rect"> tag is not in the "left,top,right,bottom" format.

You are using Javascript for the rollovers and <map> tags - that isn't necessary, you can accomplish the same rollover effect with CSS, which is always guaranteed to work. All you have to do is, give the elements that you want rollovers for class names, and then you can do something like:

.myRollover1:hover { background: url('bgRoll1.png'); }
.myRollover2:hover { background: url('bgRoll2.png'); }
.myRollover3:hover { background: url('bgRoll3.png'); }

and so on...

The best way would be to do it with CSS Sprites though.

02-20-2011, 12:18 PM
Thanks. Got it fixed for now by removing the area tags. I have to do websites in Dreamweaver as I am primarily a video effects artist and have zero knowledge really of HTML coding. As a result, I have no idea what you mean by CSS sprites! Hopefully that will come in time!