Jump to content

Rollovers not working in Firefox


unplugged_web

Recommended Posts

I have a jsp page with a button on it, but the button doesn't appear in Firefox. The code for the button is

<a href="contactus.htm"><img id="contact" src="${contactusbutton}" onmouseover="imageRollover(contact','images/contactus_over.jpg');" onmouseout="imageRollover('contact','${contactus}');"/></a>

And ${contactus} links to:

<c:set var="contactus">		<c:choose><c:when test='${section eq "contact"}'>/images/contactus_on.jpg</c:when><c:otherwise>/images/contactus.jpg</c:otherwise></c:choose>		</c:set>

on the same page. It works in all browsers except Firefox.Does anybody know why this is and what can be done about it?Thanks

Link to comment
Share on other sites

I have a jsp page with a button on it, but the button doesn't appear in Firefox [...] And ${contactus} links to: [...]
${contactus} is used in onmouseout, but you say the image doesn't even appear in the first place?If the image is actually appearing, but the rollover not working, it may be the imageRollover function--isn't that MS-specific? Or is it a function of your own (in which case please post the code).
Link to comment
Share on other sites

${contactus} is used in onmouseout, but you say the image doesn't even appear in the first place?If the image is actually appearing, but the rollover not working, it may be the imageRollover function--isn't that MS-specific? Or is it a function of your own (in which case please post the code).
No the image isn't showing up at all in FireFox. It works in every browser except that on.
Link to comment
Share on other sites

No the image isn't showing up at all in FireFox. It works in every browser except that on.
In that case I suspect it's to do with the surrounding elements (div etc). Suggest you post the whole page (from viewing source in the browser, not the jsp page).
Link to comment
Share on other sites

In that case I suspect it's to do with the surrounding elements (div etc). Suggest you post the whole page (from viewing source in the browser, not the jsp page).
Thanks for helping me with thisThe full code is:
<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Contact Us.</title><script type="text/javascript" src="js/prototype-1.4.0.js"></script><script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/overlibmws.js"></script><script type="text/javascript" src="js/ajaxtags-1.2-beta2.js"></script><script language="JavaScript" type="text/javascript"><!--var strBrowser = navigator.appName;if (strBrowser == 'Netscape') {	strBrowser = 'netscape';} else if (strBrowser == 'Microsoft Internet Explorer') {	strBrowser = 'ie';}var strVersion = navigator.appVersion;if (strBrowser == 'ie') {	if (strVersion.indexOf("7.") > 0) {		strVersion = '/7.0';	} else {		strVersion = '/6.0';	}} else {	strVersion = "";}document.writeln('');/*document.writeln('<link rel="stylesheet" type="text/css" href="css/' + strBrowser + strVersion + '/base.css" media="screen"/>');*/function imageRollover(img,src){	$(img).src = src;}//--></script></script><script src="js/ajaxticker.js" type="text/javascript">/************************************************ Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit http://www.dynamicdrive.com/ for this script and 100s more.***********************************************/</script><script src="extra/js/AC_RunActiveContent.js" type="text/javascript"></script><noscript>	<link rel="stylesheet" type="text/css" href="css/netscape/base-styles.css" media="screen"/></noscript><link rel="stylesheet" type="text/css" href="/css/base.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/cf.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/layout.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/screen.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/top.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/nav.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/panel.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/bottom.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/mainl.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/top-nav.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/news.css" media="screen"/><link rel="stylesheet" type="text/css" href="css/counter.css" media="screen"/><!--[if IE]><link rel="stylesheet" type="text/css" href="css/counterie.css" media="screen"/><![endif]--><link rel="stylesheet" type="text/css" href="css/ajaxtags.css" media="screen"/><meta name="section" content="contactus"/><meta name="decorator" content="main-template"/><link rel="stylesheet" type="text/css" href="css/contactus.css" media="screen" /><script type="text/JavaScript"><!--function MM_openBrWindow(theURL,winName,features) { //v2.0  window.open(theURL,winName,features);}//--></script><script language="javascript"><!--function popupWindow(url) {  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')}//--></script></head><body><!-- <noscript>		<div style="z-Index:100000;filter:alpha(opacity=85);MozOpacity:.85;opacity:.85;left: 0px;width: 100%; position: absolute; top: 0px; height: 10000px; background-color: white;"></div>		<div style="z-Index:100100; background-color:white; position:absolute; top:100px; left:100px; padding:20px; border-width:2px; border-color:black; border-style:solid;">		JavaScript is required for this site. Please make sure you have enable JavaScript.		</div></noscript>--> <div id="console-window">   <div id="top-panel">		<div id="top-nav">																   <a href="index.html"><img src="images//home.jpg" width="40" height="65" id="home" onmouseover="imageRollover('home','images/home_over.jpg');" onmouseout="imageRollover('home','images/home_on.jpg');"/>		<a href="contactus.htm"><img id="contact" src="/images/contactus_on.jpg" onmouseover="imageRollover('contact','/images/contactus_over.jpg');" onmouseout="imageRollover('contact','/images/contactus_on.jpg');"/></a><a href="info.html"><img src="images/info.jpg" width="70" height="65" id="info" onmouseover="imageRollover('info','images/info_over.jpg');" onmouseout="imageRollover('info','images/info.jpg');"/></a><a href="about.html"><img src="images/about.jpg" width="40" height="65" id="aboutus" onmouseover="imageRollover('aboutus','images/about_over.jpg');" onmouseout="imageRollover('aboutus','images/about.jpg');"/></a>  			</div>	  </div>	</div>  <div id="middle" class="cf">				<table id="middle-table">		<tr>						<td id="center">				<div id="center-panel">			<div class="pane-top">				<div class="top-left-full-edge"></div>				<div class="middle-full-edge"></div>				<div class="top-right-full-edge"></div>			</div>			<div class="panel-row-middle-full">				<!-- start of main panel //-->				<div id="main">									<div id="main-header"><div class="top-left-full-edge"></div><div class="top-right-full-edge"></div><div class="bottom-left-full-edge"></div></div><form id="mainForm" action="" method="post"><div id="content-panel">						<div>		<div class="form-label">		<h3>Name:</h3>		</div>		<div class="form-value">			<select name="Title">			<option value="">Please select...</option>							<option value="1"  >Mr</option>							<option value="2"  >Mrs</option>							<option value="3"  >Miss</option>							<option value="6"  >Ms</option>							<option value="5"  >Dr</option>							<option value="4"  >Other</option>						</select>					</div>	</div>						<div>		<div class="form-label">		<h3>Email:</h3>		</div>				</div>			<br/>			<div>		<div class="form-label">		<h3>Comments</h3>		</div>		<div class="form-value">		<input type="text" name="comments" value=""/>				</div>	</div>			<div class="send">	<input class="image-submit" type="image" src="images/submit.jpg"/>	</div>		<input type="hidden" name="_target1" value="1">	<input type="hidden" name="_page0" value="0">		</div>	</form>								</div>			</div>	  </td>		<td id="counter"><div id="number-counter"><PRE><script type="text/javascript">var xmlfile="counter.txt" //path to ticker txt file on your server.//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 3500, "fade")</script></PRE></div>		</td>		</tr>		</table>	</div></div></body></html>

The bit I'm having problems with it "<a href="contactus.htm"><img id="contact" src="/images/contactus_on.jpg" onmouseover="imageRollover('contact','/images/contactus_over.jpg');" onmouseout="imageRollover('contact','/images/contactus_on.jpg');"/></a>" If I use Firebug then I can see that bit of code, but it's grayed out

Link to comment
Share on other sites

Thanks for helping me with thisThe full code is: [...]
You need to add the missing end tag "</a>" to the "index.html" anchor just above the problem one:
				   <a href="index.html"><img src="images//home.jpg" width="40" height="65" id="home" onmouseover="imageRollover('home','images/home_over.jpg');" onmouseout="imageRollover('home','images/home_on.jpg');"/>	  <!-- *** MISSING END TAG! -->		<a href="contactus.htm"><img id="contact" src="/images/contactus_on.jpg" onmouseover="imageRollover('contact','/images/contactus_over.jpg');" onmouseout="imageRollover('contact','/images/contactus_on.jpg');"/></a>

That's probably the reason for the problem. However, I got lots of other validation errors too., so there are likely to be other problems lurking. Does your editor show the validation errors?

Link to comment
Share on other sites

You need to add the missing end tag "</a>" to the "index.html" anchor just above the problem one:
				   <a href="index.html"><img src="images//home.jpg" width="40" height="65" id="home" onmouseover="imageRollover('home','images/home_over.jpg');" onmouseout="imageRollover('home','images/home_on.jpg');"/>	  <!-- *** MISSING END TAG! -->		<a href="contactus.htm"><img id="contact" src="/images/contactus_on.jpg" onmouseover="imageRollover('contact','/images/contactus_over.jpg');" onmouseout="imageRollover('contact','/images/contactus_on.jpg');"/></a>

That's probably the reason for the problem. However, I got lots of other validation errors too., so there are likely to be other problems lurking. Does your editor show the validation errors?

I've added the </a>, but it still isn't working
Link to comment
Share on other sites

In FireFox I don't get an errors at all. I've uploaded the page (http://bubbledev.phonesaved.com/registrationWizard.htm?subscriptionId=3) could you possible have a look at the actual page please?Thank you
Just went there, viewed source, and pasted it into the W3C validator and it fails validation with 39 errors. You have a go and you will see all the details of the 39 errors.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...