Navigation Bar

[ChaosKnight]

Hi all,

 

I have fixed all issues that I've posted before except for one...

 

The whole navigation bar is an entire dud as you can see at:

http://www.hotels-tours-safaris.com/new_site/index.php

 

I want to fix it ASAP, and would appreciate any help.

 

The main idea of the nav bar is to use pics to make it more attractive for users, I still use tables for the layout, but later on I'm going to replace it with divs for this site, in my CSS page I define the background pic for the nav bar, and use the appropriate JavaScript for rollovers, but when I start to create the dropdown everything goes wrong, as you can see at the link I gave above, the dropdown doesn't even work and it repeats the background navbar pic for as long as that part of the table continues...

 

Any ideas?

 

Below you'll find my JavaScript, CSS and HTML for the nav bar.

 

Thanks guys

 

---JavaScript---

function preloadImages() {
if (document.images) {
  var imgFiles = preloadImages.arguments;
  var preloadArray = new Array();
  for (var i=o; i < imgFiles.length; i++) {
   preloadArray[i] = new Image;
   preloadArray[i].src = imgFiles[i];
  }
}
}

function swap(id, newsrc) {
var theImage = locateImage(id);
if (theImage) {
  theImage.src = newsrc;
}
}

function locateImage(name) {
var theImage = false;
if (document.images) {
  theImage = document.images[name];
}
if (theImage) {
return theImage;
}
return (false);
}

function displayMenu(currentMenu) {
var thisMenu = document.getElementById(currentMenu).style;
if (thisMenu.display == "block") {
  thisMenu.display = "none"
}
else {
  thisMenu.display = "block"
}
return false;
}

 

---CSS---

.nav_bg {
background-image: url(images/navbar_bg.gif);
height: 35px;
}
.menu {
        display: none;
        margin-left: 20px;
}

 

---HTML---

      <td colspan="5" class="nav_bg"><table width="780" height="35" border="0" cellspacing="0" cellpadding="0">
       <tr>
        <td> </td>
        <td width="93"><a href="index.php?page=home" onMouseOut="swap('home','images/home.gif')" onMouseOver="swap('home','images/home_ro.gif')"><img src="images/home.gif" alt="Home" name="home" width="93" height="35" border="0" id="home" /></a></td>
        <td width="13"><img src="images/spacer.gif" width="13" height="13" alt="" /></td>
        <td width="93"><a href="index.php?page=about" onMouseOut="swap('about','images/about.gif')" onMouseOver="swap('about','images/about_ro.gif')"><img src="images/about.gif" alt="About Us" name="about" width="93" height="35" border="0" id="about" /></a></td>
        <td width="13"><img src="images/spacer.gif" width="13" height="13" alt="" /></td>
        <td width="93" align="left">
         <a href="index.php" onMouseOut="swap('countries','images/countries.gif')" onMouseOver="swap('countries','images/countries_ro.gif')","return displayMenu('resMenu')"><img src="images/countries.gif" alt="Countries" name="countries" width="93" height="35" border="0" id="countries" /></a>
          <a href="index.php?page=country&country=botswana" onMouseOut="swap('botswana','subnav/botswana.jpg')" onMouseOver="swap('botswana','subnav/botswana_ro.jpg')"><img src="subnav/botswana.jpg" alt="Botswana" name="botswana" width="170" height="19" border="0" id="botswana" /></a>
          <a href="index.php?page=country&country=namibia" onMouseOut="swap('namibia','subnav/namibia.jpg')" onMouseOver="swap('namibia','subnav/namibia_ro.jpg')"><img src="subnav/namibia.jpg" alt="Namibia" name="namibia" width="170" height="19" border="0" id="namibia" /></a>
          <a href="index.php?page=country&country=southafrica" onMouseOut="swap('southafrica','subnav/southafrica.jpg')" onMouseOver="swap('southafrica','subnav/southafrica_ro.jpg')"><img src="subnav/southafrica.jpg" alt="South Africa" name="southafrica" width="170" height="19" border="0" id="southafrica" /></a>
          <a href="index.php?page=country&country=zimbabwe" onMouseOut="swap('zimbabwe','subnav/zimbabwe.jpg')" onMouseOver="swap('zimbabwe','subnav/zimbabwe_ro.jpg')"><img src="subnav/zimbabwe.jpg" alt="Zimbabwe" name="zimbabwe" width="170" height="19" border="0" id="zimbabwe" /></a>
        </td>
        <td width="13"><img src="images/spacer.gif" width="13" height="13" alt="" /></td>
        <td width="93"><a href="index.php?page=rental" onMouseOut="swap('car_rental','images/car_rental.gif')" onMouseOver="swap('car_rental','images/car_rental_ro.gif')"><img src="images/car_rental.gif" alt="Car Rental" name="car_rental" width="93" height="35" border="0" id="car_rental" /></a></td>
        <td width="13"><img src="images/spacer.gif" width="13" height="13" alt="" /></td>
        <td width="93"><a href="index.php?page=maps" onMouseOut="swap('maps','images/maps.gif')" onMouseOver="swap('maps','images/maps_ro.gif')"><img src="images/maps.gif" alt="Maps" name="maps" width="91" height="35" border="0" id="maps" /></a></td>
        <td width="13"><img src="images/spacer.gif" width="13" height="13" alt="" /></td>
        <td width="93"><a href="index.php?page=bookings" onMouseOut="swap('bookings','images/bookings.gif')" onMouseOver="swap('bookings','images/bookings_ro.gif')"><img src="images/bookings.gif" alt="Bookings" name="bookings" width="93" height="35" border="0" id="bookings" /></a></td>
        <td width="13"><img src="images/spacer.gif" width="13" height="13" alt="" /></td>
        <td width="93"><a href="index.php?page=contact" onMouseOut="swap('contact','images/contact.gif')" onMouseOver="swap('contact','images/contact_ro.gif')"><img src="images/contact.gif" alt="Contact" name="contact" width="93" height="35" border="0" id="contact" /></a></td>
        <td> </td>
       </tr>
      </table></td>

 

[KevinM1]

A couple things popped out at me after a quick glance:

 

1. There's a typo in your preloadImages() function.  In your for-loop, you have 'var i=o'.  You need it to be 'var i=0.'

 

2. It looks like your preloadArray variable is going out of scope.  You declare it and populate it in the preloadImages() function, but after that function ends, it will go away.  You should declare it in the global scope as an empty array (i.e., var preloadArray = new Array(); ), then fill it in the preloadImages() function.  That way, the preloaded images will always be available.

 

Are you calling displayMenu() anywhere?  I can't see it in your HTML.

[ChaosKnight]

Thanks for the reply, everything works correct know except for the drop down, can you please go look what happens when you mouse over the countries link? It's some real unwanted behaviour...

 

How can I possibly fix that?

 

Thanks

[KevinM1]

Why are you using a span for the dropdown?  A span's default display is inline.  You should be using a div instead, as it's a block element by default.

 

From what I can see, your dropdown images are wider than your table cell.  You specify that the images should be 170px wide, but the cell is only specified to be 93px wide.  This is breaking your layout.

 

The 'Countries' image is moving up because you set the display to none, then to block.  Setting an element's display to none takes it out of the document flow completely.  Instead of using the display property, use the visibility property.  Have it set to hidden as the default, and visible during the mouse event.

 

When attempting to create a toggled element (in this case, your dropdown menu), it's best to create the layout with the element visible, at least during the planning stages.  That way, you can see how things look when in the activated state.  Once that's all set to your liking, then you can hide the element and write the JavaScript to display it during a mouse event.

 

I hope this helps.

[emehrkay]

*didnt read the rest of the thread, just looked at the example*

 

In your sub menu, you need to specify it as position: absolute

[ChaosKnight]

Thanks! It finally works for every browser except IE, if you can just try and help me with this then I would be ever thankful 

 

Once again thanks guys

[ChaosKnight]

Is there someone that knows why it only doesn't display correct in IE?