rollover in inframe not functioning in Firefox

25 pts.
Mozilla Firefox
Web development
I'm a little embarrassed to be asking this here, but I'm putting together an online art portfolio site and I'm having trouble displaying in Firefox a rollover image that's within an iframe. It works in IE, but in Firefox the second image does not appear on mouseover. I think the problem might be that the rollover object is layered over/in front of another object. I've looked online in other forums, couldn't find an answer to the problem.

Answer Wiki

Thanks. We'll let you know when a new response is added.

Are you working with divs? What is their visibility? Are you getting any errors on the page? Can you give us the errors?

Is this problem happening in IE6 or 7? Have you used browsershots to see your site in all browsers? Is it limited to just one? Are there other inconsistencies?

Can you give us a link to the site?

Discuss This Question: 2  Replies

There was an error processing your information. Please try again later.
Thanks. We'll let you know when a new response is added.
Send me notifications when members answer or reply to this question.
  • Dead End
    Part of the problem is I'm using Web Easy 7 Pro since I know practically nothing about HTML, CSS or Javascript. I haven't uploaded the page to my webhost yet so I can't provide the URL, but the problem comes up when previewing the page in Firefox. In IE7 it works fine. Here's a screenshot of the test page I created for the rollover test for reference: When you click on a thumbnail on the left, the inline frame in the center of the page is supposed to display the HTML page with the rollover. When you rollover the image, it's supposd to swap with a second image I've created, with some text info. The HTML for the Gallery page that WebEasy creates is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <!-- Generated by Avanquest Technology v:7.1. For information please visit: --> <html lang="en"> <head> <title> Rollover test </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css;"> <meta name="Author" content="Web Easy Professional Avanquest Software"> <meta name="Keywords" content="Web Easy, Avanquest"> <meta name="Description" content="This web site has been created with technology from Avanquest Software."> <link rel="stylesheet" href="white_splash_page_flash_gallery_and_iframe_test_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //--> <link rel="stylesheet" href="10os_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //--> <script src="white_splash_page_flash_gallery_and_iframe_test_g.js" type="text/javascript"></script> <!--// Document Script //--> </head> <body> <div id="page"> <span id="e22" class="cc01"></span> <span id="e21" class="cc02"></span> <span id="e20"></span> <span id="e19"></span> <span id="e18"></span> <div id="e17" class="cc03"> <a href="gallery_index.htm"> <div>Gallery</div></a> </div> <div id="e16" class="cc03"> <a href="animation_samples.htm"> <div>Animation</div> <div>  Samples</div></a> </div> <div id="e15" class="cc03"> <div>2/2</div> </div> <a href="10os.htm"> <img id="e14" name="e14" src="white_splash_page_flash_gallery_and_iframe_test010001.jpg" title="" alt="white_splash_page_flash_gallery_and_iframe_test010001.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e13" name="e13" class="cc04" src="18cwth.jpg" title="" alt="18cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e12" name="e12" class="cc04" src="20cwth.jpg" title="" alt="20cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e11" name="e11" class="cc04" src="11cwth.jpg" title="" alt="11cwth.jpg" align="right" border="0"></a> <a href="" target="body1" > <img id="e10" name="e10" class="cc04" src="12cwth.jpg" title="" alt="12cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e9" name="e9" class="cc04" src="13cwth.jpg" title="" alt="13cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e8" name="e8" class="cc04" src="14cwth.jpg" title="" alt="14cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e7" name="e7" class="cc04" src="17cwth.jpg" title="" alt="17cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e6" name="e6" class="cc04" src="19cwth.jpg" title="" alt="19cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e5" name="e5" class="cc04" src="15cwth.jpg" title="" alt="15cwth.jpg" align="right" border="0"></a> <a href="" target="body1"> <img id="e4" name="e4" class="cc04" src="16cwth.jpg" title="" alt="16cwth.jpg" align="right" border="0"></a> <div id="e3" class="cc01"> <iframe name="body1" width="670" height="480" frameborder="0" onmouseover="mouseHandler('choice1', true)" onmouseout="mouseHandler('choice1', false)" ></iframe> </div> <div id="e2" class="cc03"> <a href="about_bio.htm"> <div>About / Contact</div></a> </div> <div id="e1" class="cc03"> <a href="contact.htm"> <div>Links</div></a> </div> </div> </body> </html> The php created for the gallery page is this: /*--- Avanquest WebEasy Document Script ---*/ IE=(navigator.appName.indexOf('Microsoft') >= 0); NS=(navigator.appName.indexOf('Netscape') >= 0); SF=(navigator.appName.indexOf('Safari') >= 0); FF=(navigator.userAgent.indexOf('Firefox') >= 0); OP=(navigator.userAgent.indexOf('Opera') >= 0); GK=(navigator.userAgent.indexOf('Gecko') >= 0); V4=(parseInt(navigator.appVersion) >= 4); if((V5=navigator.appVersion.indexOf('MSIE '))<0) V5=-5; V5=(parseInt(navigator.appVersion.charAt(V5+5))>=5); MAC=(navigator.userAgent.indexOf('Mac')!=-1); /*--- EndOfFile ---*/ The HTML for the test page I created that contains the rollover image(s) and script that is supposed to be displayed in the inline frame of the gallery page once a thumbnail is clicked is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <!-- Generated by Avanquest Technology v:7.1. For information please visit: --> <html lang="en"> <head> <title> Album1 » Page 1 of 1 </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css;"> <link rel="stylesheet" href="album1_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //--> <link rel="stylesheet" href="rollovertest_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //--> <script src="album1_g.js" type="text/javascript"></script> <!--// Document Script //--> <script src="rollovertest_a.js" type="text/javascript"></script> <!--// Motion Script //--> </head> <body id="page" onload="if(IE||V5) OnWeLoad()"> <a href="#" onmouseover="OnWeOver(0,0,0,IDP[1],Img1,0,1)" onmouseout="OnWeOver(0,0,0,IDP[1],Img1,0,0)"> <img id="e1" name="e1" src="album1001001.jpg" title="" alt="album1001001.jpg" align="right" border="0"></a> </body> </html> The URL for the page with the rollover is You can see that the rollover page works by itself in Firefox. However, it does not rollover when it's being displayed in the inline frame on the gallery page.
    25 pointsBadges:
  • Dead End
    a href="” target="body1″ > <img id="e10″ name="e10″ class="cc04″ src="12cwth.jpg” title="" alt="12cwth.jpg” align="right” border="0″></a> Is the thumbnail link for the rollover test. Ignore the rest, they're just holdovers from a previous gallery page I copied.
    25 pointsBadges:

Forgot Password

No problem! Submit your e-mail address below. We'll send you an e-mail containing your password.

Your password has been sent to:

To follow this tag...

There was an error processing your information. Please try again later.

Thanks! We'll email you when relevant content is added and updated.


Share this item with your network: