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:
<a href="http://smg.photobucket.com/albums/v37/jenumba/?action=view¤t=htmlgallery.jpg" rel="nofollow">http://smg.photobucket.com/albums/v37/jenumba/?action=view¤t=htmlgallery.jpg</a>
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” “http://www.w3.org/TR/html4/loose.dtd”>
<!– Generated by Avanquest Technology v:7.1. For information please visit: <a href="http://www.avanquestusa.com/" rel="nofollow">http://www.avanquestusa.com/</a> –>
<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="http://chilepino.890m.com/Concept_Art/HTML_gallery/18CW.jpg” target="body1″>
<img id="e13″ name="e13″ class="cc04″ src="18cwth.jpg” title="" alt="18cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/20CW.jpg” target="body1″>
<img id="e12″ name="e12″ class="cc04″ src="20cwth.jpg” title="" alt="20cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/11CW.jpg” target="body1″>
<img id="e11″ name="e11″ class="cc04″ src="11cwth.jpg” title="" alt="11cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Test/rollovertest.html” target="body1″ >
<img id="e10″ name="e10″ class="cc04″ src="12cwth.jpg” title="" alt="12cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/13CW.jpg” target="body1″>
<img id="e9″ name="e9″ class="cc04″ src="13cwth.jpg” title="" alt="13cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/14CW.jpg” target="body1″>
<img id="e8″ name="e8″ class="cc04″ src="14cwth.jpg” title="" alt="14cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/17CW.jpg” target="body1″>
<img id="e7″ name="e7″ class="cc04″ src="17cwth.jpg” title="" alt="17cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/19CW.jpg” target="body1″>
<img id="e6″ name="e6″ class="cc04″ src="19cwth.jpg” title="" alt="19cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/15CW.jpg” target="body1″>
<img id="e5″ name="e5″ class="cc04″ src="15cwth.jpg” title="" alt="15cwth.jpg” align="right” border="0″></a>
<a href="http://chilepino.890m.com/Concept_Art/HTML_gallery/16CW.jpg” 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” “http://www.w3.org/TR/html4/loose.dtd”>
<!– Generated by Avanquest Technology v:7.1. For information please visit: <a href="http://www.avanquestusa.com/" rel="nofollow">http://www.avanquestusa.com/</a> –>
<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 <a href="http://chilepino.890m.com/Test/rollovertest.html" rel="nofollow">http://chilepino.890m.com/Test/rollovertest.html</a>
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.
MouseOver, MouseOut, iFrame, firefox, IE7, 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.
0
