Jump to content
unplugged_web

Rollovers not working in Firefox

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

Share this post


Link to post
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).

Share this post


Link to post
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.

Share this post


Link to post
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).

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...