Link to home
Start Free TrialLog in
Avatar of CSHTech
CSHTechFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Adding HTML page to site but javascript is highlighting wrong page in Navigation


I've been asked to add a page to a website that was created by someone else who cannot be contacted. The site has a side navigation bar which is comprised of gif images, which change when a mouse is over them and the current page shows an underlined image.

I've copied a page (the original 'Accommodation' page), made the amendments to it and added it to the site with a new title 'Winter Breaks'. The link to it on each of the (other) pages is by a link on an image and not within the navigation bar itself.

The problem is that when this new page is displayed, the 'Accommodation' entry in the navigation is still underlined as if 'Accommodation' was the current page, even though the page has actually been renamed to something else.

Can anyone point out what needs to be changed/removed to get rid of the 'Accommodation' change in the navbar..?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<link rel="SHORTCUT ICON" href="" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content= ----------------------------- /> 
<meta name="description" content="--------------------" /> 
<script language="javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'headers/beach-winter.png'
theImages[1] = 'headers/calgary-beach.png'
theImages[2] = 'headers/calgary-sunset.png'
theImages[3] = 'headers/calm-after-the-storm.png'
// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');

//  End -->
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
<style type="text/css">
.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
a:link {
	color: #000;
a:visited {
	color: #000;
a:hover {
	color: #6c4804;
a:active {
	color: #000;

<body onload="MM_preloadImages('images/home-current.gif','images/accommodation-rollover.gif','images/photo-gallery-rollover.gif','images/price-



<div id="logo"><img src="images/top_logo.gif" width="800" height="127" alt="Ben Bhuidhe House" /></div>
<div id="header"><script language="javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->

<!-- Begin
//  End -->
</script></div><br />
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <td width="192" rowspan="2" valign="top"><div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage

('home','','images/home-rollover.gif',1)"><img src="images/home.gif" alt="Home" name="home" width="192" height="24" border="0" id="home" /></a><a 

href="accommodation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accommodation','','images/accommodation-current.gif',1)"><img 

src="images/accommodation-current.gif" alt="Accommodation" name="accommodation" width="192" height="25" border="0" id="accommodation" /></a><a 

href="photo-gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photo-gallery','','images/photo-gallery-rollover.gif',1)"><img 

src="images/photo-gallery.gif" alt="Photo Gallery" name="photo-gallery" width="192" height="25" border="0" id="photo-gallery" /></a><a href="price-

availability.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('priceandavailability','','images/price-availability-

rollover.gif',1)"><img src="images/price-availability.gif" alt="Price &amp; Availability" name="priceandavailability" width="192" height="25" 

border="0" id="priceandavailability" /></a><a href="book.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('book','','images/book-

rollover.gif',1)"><img src="images/book.gif" alt="Make A Booking" name="book" width="192" height="25" border="0" id="book" /></a><a href="location-

travel.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('locationandtravel','','images/location-travel-rollover.gif',1)"><img 

src="images/location-travel.gif" alt="Location &amp; Travel" name="locationandtravel" width="192" height="25" border="0" id="locationandtravel" 

/></a><a href="surrounding-area.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('surroundingarea','','images/surrounding-area-

rollover.gif',1)"><img src="images/surrounding-area.gif" alt="Surrounding Area" name="surroundingarea" width="192" height="25" border="0" 

id="surroundingarea" /></a>
          <a href="testimonials.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('testimonials','','images/testimonials-

rollover.gif',1)"><img src="images/testimonials.gif" alt="testimonials" name="testimonials" width="192" height="25" border="0" id="testimonials" 

          <a href="terms-conditions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('termsandconditions','','images/terms-conditions

-rollover.gif',1)"><img src="images/terms-conditions.gif" alt="Terms &amp; Conditions" name="termsandconditions" width="192" height="25" border="0" 

id="termsandconditions" /></a><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactus','','images/contact-us-

rollover.gif',1)"><img src="images/contact-us.gif" alt="Contact Us" name="contactus" width="192" height="25" border="0" id="contactus" /><br />
          <br />

Open in new window

Avatar of Sudhindra A N
Sudhindra A N
Flag of India image

it will be better if you can send a link to the test page or to the site if possible,
Avatar of CSHTech


Unfortunately the person who owns the site doesn't want it to be shown in its present state........

Essentially something in the code on the new page is still triggering the change to the 'Accommodation' link in the navigation - the code above is the relevant section as the rest is Facebook, text, footer etc.

If I could just turn off this trigger for this page only, that would do the trick.

Avatar of CSHTech


Further, Firebug shows the below for the highlighted 'Accommodation' link....

<img width="192" height="25" border="0" id="accommodation" name="accommodation" alt="Accommodation" src="http://www.DOMAIN/images/accommodation-current.gif">

Open in new window

with this directly above it

<a onmouseover="MM_swapImage('accommodation','','images/accommodation-current.gif',1)" onmouseout="MM_swapImgRestore()" href="accommodation.html"></a>

Open in new window

Avatar of Chris Stanyon
The image you use for the Accommodation link is accommodation-current.gif, and I'm guessing it should be accommodation-rollover.gif.

FYI - Doing navigation like that really is a bad way of doing it. Google for CSS Navigation Sprites
Avatar of CSHTech


Thanks for the reply.

Unfortunately it was built by someone else so I have to work with it. :(

What do I need to change in the page, to remove the 'current' image displaying in the navigation on this new page....? I just need the navigation to not show any selection as current, as this new page is not in the navigation bar at all.

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CSHTech



Many thanks.

The code you mentioned I think is the output code from Firebug. In terms of the actual page code itself, do I need to change the section in this page from listing an 'accommodation-current' gif at all, to change it to just having the basic 'accommodation' gif in its place?

In other words, where it says accommodation-current.gif below, to just accommodation.gif? (I noticed that there is no rollover gif listed..?).
<a href="accommodation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accommodation','','images/accommodation-current.gif',1)"><img src="images/accommodation-current.gif" alt="Accommodation" name="accommodation" width="192" height="25" border="0" id="accommodation" /></a>

Open in new window

Sorry to sound thick but I need to get this right so the page can go live asap. :)

Many thanks.
The code I've shown is the source code of your page - nothing to do with Firebug.

Yes, you will need to change the accommodation-current.gif to accommodation.gif for the SRC of the image, but if you want the mouse over (hover) to work, you will also need to set the argument of the swapImage function to accommodation-rollover.gif, as in my code.

It might help if you look at the code for the accommodation link in a page that isn't the accommodation page - that way you'll see what it's supposed to look like when it's not 'current'

If you're using DreamWeaver (we all have our cross to bear), then you may need to switch to Code View to see the source code. It'll be pretty difficult to edit this using the WYSIWYG editor. Better yet, use a text editor!
Avatar of CSHTech


Many thanks for your help. Now works perfectly.