Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript problems with firefox - any advice appreciated!

Status
Not open for further replies.

Bashdon

Technical User
Feb 3, 2009
7
GB
Hi All

I'm creating a web page that uses javascript to change the look of the links at the top of the page when you mouseover. I have tested the code, which works in IE but does not work properly in firefox. Here is the code I am using:

<SCRIPT language="JavaScript">
if (document.images)
{
pic1on= new Image(84,25);
pic1on.src="home button2.gif";
pic2on= new Image(76,25);
pic2on.src="news button2.gif";
pic3on= new Image(116,25);
pic3on.src="features button2.gif";
pic4on= new Image(146,25);
pic4on.src="tricks&tips button2.gif";
pic5on= new Image(161,25);
pic5on.src="destinations button2.gif";
pic6on= new Image(171,25);
pic6on.src="review centre button2.gif";
pic7on= new Image(116,25);
pic7on.src="contact button2.gif";

pic1off= new Image(84,25);
pic1off.src="home button1.gif";
pic2off= new Image(76,25);
pic2off.src="news button1.gif";
pic3off= new Image(116,25);
pic3off.src="features button1.gif";
pic4off= new Image(146,25);
pic4off.src="tricks&tips button1.gif";
pic5off= new Image(161,25);
pic5off.src="destinations button1.gif";
pic6off= new Image(171,25);
pic6off.src="review centre button1.gif";
pic7off= new Image(116,25);
pic7off.src="contact button1.gif";
}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document
.src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document
.src= imgOff;
}
}
</SCRIPT>

and then the HTML:

<tr width=990 height=25>
<td><img src="link spacer left.gif" width=41 height=25></td>
<td><A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><IMG SRC="home button1.gif" name="pic1" width="84" height="25" border="0" alt="Home"></A></td>
<td><A HREF="news.html" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')"><IMG SRC="news button1.gif" name="pic2" width="76" height="25" border="0" alt="News"></A></td>
<td><A HREF="features.html" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')"><IMG SRC="features button1.gif" name="pic3" width="116" height="25" border="0" alt="Features"></a></td>
<td><A HREF="tricks&tips.html" onMouseover="lightup('pic4')" onMouseout="turnoff('pic4')"><IMG SRC="tricks&tips button1.gif" name="pic4" width="146" height="25" border="0" alt="Tricks & Tips"></a></td>
<td><A HREF="destinations.html" onMouseover="lightup('pic5')" onMouseout="turnoff('pic5')"><IMG SRC="destinations button1.gif" name="pic5" width="161" height="25" border="0" alt="Destinations"></a></td>
<td><A HREF="review centre.html" onMouseover="lightup('pic6')" onMouseout="turnoff('pic6')"><IMG SRC="review centre button1.gif" name="pic6" width="171" height="25" border="0" alt="Review Centre"></a></td>
<td><A HREF="contact.html" onMouseover="lightup('pic7')" onMouseout="turnoff('pic7')"><IMG SRC="contact button1.gif" name="pic7" width="116" height="25" border="0" alt="Contact"></td>
<td><img src="blank button.gif" width=41 height=25></td>
</tr>
</table>

When you navigate to another page and then go back to the original page (by clicking the browsers' back button), the link that was originally clicked remains 'on' until you hover over it again to make it turn off. This should of course automtically return to the 'off' position.

Any ideas would be much appreciated as I've been trying to figure this out for a while and have got serious brain pain!

Thanks loads

Paul
 
I would suggest you get rid of your javascript. The task you are attempting to do can be done so much better using just CSS.

Using some modification of your code (using a transparent image with a background image that is controlled via CSS and the :hover pseudo-class)... here is an example of how to do this:

Code:
<style type="text/css">
a #pic1 {
  background: url(images/home_button1.gif) no-repeat left top transparent;
  width: 84px;
  height: 24px;
  border: 0px;
}
a:hover #pic1 {
  background-image: url(images/home_button1_over.gif);
}

a #contactUs {
  background: url(images/contact_button1.gif) no-repeat left top transparent;
  width: 84px;
  height: 24px;
  border: 0px;
}
a:hover #contactUs {
  background-image: url(images/contact_button1_over.gif);
}
</style>

Code:
...
<tr>
<td><a href="index.html"><img src="transparent.gif" id="pic1" alt="Home"></a></td>
</tr>

<tr>
<td><a href="contact.html"><img src="transparent.gif" id="contactUs" alt="Contact"></a></td>
</tr>
...
It's also better because it will work on all browsers... without requiring javascript.

Let us know how you go!

Cheers,
Jeff

[tt]Visit my blog [!]@[/!] Visit Code Couch [!]@[/!] [/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Thanks Jeff. I tried it and it works beautifully on IE, however when I open it up in firefox there's just a blank space where the graphics should be. The transparent graphic is there but not the underlying ones. Any ideas? Here's my code:

<style type="text/css">

a #pic1 {
background: url(home button1.gif) no-repeat left top transparent;
width: 84px;
height: 25px;
border: 0px;
}
a:hover #pic1 {
background-image: url(home button2.gif);
}
</style>

<td><A HREF="index.html"><img src="transparent.gif" id="pic1" alt="Home" border="0"></A></td>

 
Thanks Dan and Jeff. All works now. Fantastic!
 
I have another suggestion for your code (to add to SEO and for accessibility) for each of the menu items:

Code:
...
<tr>
<td><a href="index.html"><img src="transparent.gif" id="pic1" alt="Home">[!]<span class="hidden">Home</span>[/!]</a></td>
</tr>
...

You would need a class called hidden for this to work (which moves the text offscreen so you never see it unless you disable CSS - or are a search engine spider):
Code:
<style type="text/css">
.hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
</style>

Cheers,
Jeff

[tt]Visit my blog [!]@[/!] Visit Code Couch [!]@[/!] [/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Hi Jeff

Thanks for the extra code. Improving the site in terms of SEO has been on my mind, so very helpful thanks.

I've been on your site. Lots of interesting stuff on there that I'll definately have a look at.

Cheers
Paul

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top