Jump to content

Navigation Bar


ChaosKnight

Recommended Posts

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

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.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.