Javascript problems with firefox - any advice appreciated!

[Bashdon]

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

 

[BabyJeffy]

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:

<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>

...
<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 [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/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

 

[Bashdon]

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>

 

[BillyRayPreachersSon]

Your filenames have spaces in them which need escaping as %20.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Bashdon]

Thanks Dan and Jeff. All works now. Fantastic!

 

[BabyJeffy]

I have another suggestion for your code (to add to SEO and for accessibility) for each of the menu items:

...
<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):

<style type="text/css">
.hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
</style>

Cheers,
Jeff

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

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/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

 

[Bashdon]

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