# Rollover images not working on Firefox



## Rachel4 (Mar 26, 2008)

Hi, I was wondering if someone could help me with a browser compatibility issue?
I am fairly new to web design and have been building a website for work: www.voiceovers-uk.com
I have come up against a problem with rollover images not working in Firefox or other Mac browsers. It works perfectly in Internet Explorer. The rollover triggers 2 images please see www.voiceovers-uk.com/womensvoices.htm for an example (hover over a face).
I have noticed in Firefox that SOME of the images when you rollover the left hand side of the image do initiate the rollover, but this only works on a few and only approx 1 px on the left of the image.

Can anyone help?
I have posted the code for the inline frame used in this page below in case that is of any help.
Thanks for your time,
Rachel



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #222222;
}
body {
background-color: #B5B6B9;
}
-->
</style>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

html, body{
scrollbar-face-color:#6E6E6E;
scrollbar-base-color:#EEEEEE;
scrollbar-arrow-color:black;
scrollbar-track-color:#EEEEEE;
scrollbar-shadow-color:#EEEEEE;
scrollbar-highlight-color:#CCCCCC;
scrollbar-3dlight-color:#DDDDDD;
scrollbar-darkshadow-Color:#AAAAAA;
}

.style1 {font-size: 12px}
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a_.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('images/sp_voiceinfobar.gif','images/sarah_parnell_picbright.jpg','images/trish_jarman_picbright.jpg','images/sally_bosley_picbright.jpg','images/jennifer_johnston_picbright.jpg','images/stephanie_canon_picbright.jpg','images/camille_dixon_picbright.jpg','images/emma_clarke_picbright.jpg','images/trishjarman_voiceinfobar.gif','images/sallybosley_voiceinfobar.gif','images/jenniferjohnson_voiceinfobar.gif','images/stephaniecanon_voiceinfobar.gif','images/silouette_picbright.gif','images/kateparker_voiceinfobar.gif','images/emily_morris_picbright.jpg','images/emilymorris_voiceinfobar.gif','images/camilledixon_voiceinfobar.gif','images/emmaclarke_voiceinfobar.gif','images/rebecca_gethings_picbright.jpg','images/rebeccagethings_voiceinfobar.gif')">
<p class="style1">Please click on the faces below to here their demos and read their biogs. Please call us on +44 (0)1524 792020 if you can't find the voice you are looking for, as this website only shows a selection of our voices. <a href="womensvoicescontentspage2.htm"><img src="images/next_page.gif" width="140" height="20" border="0" align="right"></a></p>
<table width="390" border="0">
<tr>
<td><img src="images/voiceinfosentance_blankspacer.gif" name="blankinfoinstructions" width="356" height="30" id="blankinfoinstructions"></td>
</tr>
</table>
<br>
<table width="390" border="0" align="left">
<tr>
<td width="70"><a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/sp_voiceinfobar.gif','sarahparnell','','images/sarah_parnell_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/sarah_parnell_pic.jpg" name="sarahparnell" width="60" height="60" border="0" usemap="#sarahparnellMap" id="sarahparnell"></a></td>
<td width="70"><a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/emmaclarke_voiceinfobar.gif','emmaclarke','','images/emma_clarke_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/emma_clarke_pic.jpg" name="emmaclarke" width="60" height="60" border="0" usemap="#emmaclarkeMap" id="emmaclarke"></a></td>
<td width="70"><a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/trishjarman_voiceinfobar.gif','trishjarman','','images/trish_jarman_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/trish_jarman_pic.jpg" name="trishjarman" width="60" height="60" border="0" usemap="#trishjarmanMap" id="trishjarman"></a></td>
<td width="70"><a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/sallybosley_voiceinfobar.gif','sallybosley','','images/sally_bosley_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/sally_bosley_pic.jpg" name="sallybosley" width="60" height="60" border="0" usemap="#sallybosleyMap" id="sallybosley"></a></td>
<td width="88"><a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/jenniferjohnson_voiceinfobar.gif','jenniferjohnston','','images/jennifer_johnston_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Jennifer_johnston_pic.jpg" name="jenniferjohnston" width="60" height="60" border="0" usemap="#jenniferjohnstonMap" id="jenniferjohnston"></a></td>
</tr>
<tr>
<td><br>
<a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/stephaniecanon_voiceinfobar.gif','stephaniecanon','','images/stephanie_canon_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/stephanie_cannon_pic.jpg" name="stephaniecanon" width="60" height="60" border="0" usemap="#stephaniecanonMap" id="stephaniecanon"></a> <br></td>
<td><br> <a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/kateparker_voiceinfobar.gif','kateparker','','images/silouette_picbright.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/kateparker_silouette_pic.gif" name="kateparker" width="60" height="60" border="0" usemap="#kateparkerMap" id="kateparker"></a></td>
<td><br>
<a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/emilymorris_voiceinfobar.gif','emilymorris','','images/emily_morris_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/emily_morris_pic.jpg" name="emilymorris" border="0" usemap="#emilymorrisMap" id="emilymorris"></a> </td>
<td><br> <a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/camilledixon_voiceinfobar.gif','camilledixon','','images/camille_dixon_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/camille_dixon_pic.jpg" name="camilledixon" width="60" height="60" border="0" usemap="#camilledixonMap" id="camilledixon"></a></td>
<td><br>
<a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/rebeccagethings_voiceinfobar.gif','rebeccagethings','','images/rebecca_gethings_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/rebecca_gethings_pic.jpg" name="rebeccagethings" width="60" height="60" border="0" usemap="#rebeccagethingsMap" id="rebeccagethings"></a> </td>
</tr>
</table><br>
<p><!--BEGIN code for Contents Page TOP>
<div id="datacontainer" style="position:absolute;left:0;top:10;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=0">
<div>
<!--END code for Contents Page TOP>

</div>
<div>
<script language="JavaScript1.2">
//<iframe> script by Dynamicdrive.com
//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=2
function initialize(){
marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height")
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top=5
thelength=dataobj.offsetHeight
scrolltest()
}
function scrolltest(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top=5
setTimeout("scrolltest()",50)
}
window.onload=initialize
</script>
<!--END code for Contents Page BOTTOM>
</body>
</html>








<map name="sarahparnellMap">
<area shape="rect" coords="2,1,59,61" href="sarahparnell_demos.htm">
</map>

<map name="jenniferjohnstonMap">
<area shape="rect" coords="0,1,62,59" href="jenniferjohnson_demos.htm">
</map>

<map name="stephaniecanonMap">
<area shape="rect" coords="1,1,58,58" href="stephaniecannon_demos.htm">
</map>

<map name="emmaclarkeMap">
<area shape="rect" coords="3,2,59,60" href="emmaclarke_demos.htm">
</map>
<map name="emilymorrisMap">
<area shape="rect" coords="3,3,57,58" href="emilymorris_demos.htm">
</map>

<map name="sallybosleyMap">
<area shape="rect" coords="0,0,63,67" href="sallybosley_demos.htm">
</map>

<map name="trishjarmanMap">
<area shape="rect" coords="1,0,63,66" href="trishjarman_demos.htm">
</map>
<map name="kateparkerMap">
<area shape="rect" coords="3,4,62,65" href="kateparker_demos.htm">
</map>
<map name="emilymorrisMap">
<area shape="rect" coords="3,2,62,59" href="emilymorris_demos.htm">
</map>
<map name="camilledixonMap">
<area shape="rect" coords="2,3,60,66" href="camilledixon_demos.htm">
</map>
<map name="lorrieringwaldMap">
<area shape="rect" coords="3,1,59,61" href="lorrieringwald_demos.htm">
</map>

<map name="rebeccagethingsMap">
<area shape="rect" coords="1,1,58,58" href="rebeccagethings_demos.htm">
</map>_


----------



## Jaxo (Feb 21, 2008)

Hi Rachel4! Welcome to TSF.

I think I have a solution for you, but I am not sure what effect it would have in IE. Using firebug for firefox I was able to play around with your code live in the browser to figure out what was wrong. By taking out usemap="#stephaniecanonMap" option on each img tag I was able to get the rollover effect to work on each picture. Two examples in *bold* on what I removed are below. 


```
<a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/stephaniecanon_voiceinfobar.gif','stephaniecanon','','images/stephanie_canon_picbright.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="images/stephanie_cannon_pic.jpg" name="stephaniecanon" width="60" height="60" border="0" [B]usemap="#stephaniecanonMap"[/B] id="stephaniecanon"></a><br>
</td>
<td><br>
<a href="javascript:;" onMouseOver="MM_swapImage('blankinfoinstructions','','images/kateparker_voiceinfobar.gif','kateparker','','images/silouette_picbright.gif',1)" onMouseOut="MM_swapImgRestore()">
<img src="images/kateparker_silouette_pic.gif" name="kateparker" width="60" height="60" border="0" [B]usemap="#kateparkerMap"[/B] id="kateparker"></a>
</td>
```
Again, not sure what effect this will have in IE. Probably would recommend making a back up to test out my theory.

Hope this helps fix your issue!


----------



## Rachel4 (Mar 26, 2008)

Hi Jaxo,

Thanks so much for your help! That seems to have sorted it and it seems happy in IE as well! Really appreciate your time on this one I had run out of ideas!!

Thanks again,

Rachel :smile:


----------



## Jaxo (Feb 21, 2008)

Glad to help! Let us know if there is anything else we can help you with.


----------

