Results 1 to 6 of 6

Thread: Navigation Menu Help

  1. #1
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Navigation Menu Help

    Hello I am trying to create a horizontal tab menu with java script and html.
    I want one of the tabs "terms" to appear on its on state by default when page loads. How do I do that. I have already created the rollover images. How do I get one of the tabs to be on the rolled over image by default?



    <SCRIPT LANGUAGE="JavaScript">
    image1 = new Image();
    image1.src = "images/nav1_on.gif";

    image2 = new Image();
    image2.src = "images/nav2_on.gif";

    </script>

    html
    <a href="index.htm" onmouseover="image1.src='images/nav1_on.gif';"
    onmouseout="image1.src='images/nav1_off.gif';">
    <img name="image1" src="images/nav1_off.gif" border=0></a>

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Could you show us a link on the page that you are referring?..
    What about changing the default image on load?
    Code:
    <img name="image1" src="images/nav1_off.gif" border=0>
    ..Use images/nav1_on.gif instead
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I do not have it up and running yet. but was looking for a page lode event that would select the rolover image by default

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    ...But my point is, it has the same function as changing the image from the image tag
    Anyway, you might have a reason behind it, i'll just show you this example:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    window.onload = function()
    {	
    	document.getElementById('image1').src = 'images/nav1_on.gif';
    	
    	document.getElementById('clickme').onmouseover = function()
    	{
    	document.getElementById('image1').src = 'images/nav1_on.gif';
    	}
    	document.getElementById('clickme').onmouseout = function()
    	{
    	document.getElementById('image1').src = 'images/nav1_off.gif';
    	}
    }
    </script> 
    </head>
    <body>
    <a href="index.htm" id="clickme">
    <img name="image1" src="images/nav1_off.gif" border=0></a>
    </body>
    </html>
    Ideally, it has your wish of having images/nav1_on.gif as the default image during onload

    Just a suggestion, you should (if possible) avoid combining presentation (JS) from markups (HTML). See example

    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks I will try it out. Its an assignment and unfortunately that short cut of just swithcinh the image has been banned. one uestion why should I avoid combining the two? Whats the problems?

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Problem?..not really a problem, it's just to make your HTML more simple to look
    There are some validation errors that results in placing JS in Markups, anyway this will not bug you.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •