Nav Question

They have: 344 posts

Joined: Jun 2002

Hi guys!

I'm trying to make a nav bar like:

http://www.torquayunited.premiumtv.co.uk/

I see that you would use onMouseOver, onMouseOut and onMouseClick but I cannot see how to include the links on the onMouseClick.

My current idea would be to have it like :

<onMouseOver="home.src='homeover.jpg'" onMouseOut="home.src='homeup.jpg'"> <li><a href="home.php">Home</a></li>
<li><a href="anotherlink.htm"></a></li> onMouseClick="home.src='homeup.jpg'">
<IMG SRC="homeup.jpg" NAME="home" BORDER=0 width="120" height="18">
'

Is it anywhere near close to being right?

Many thanks for your help! Smiling

He has: 1,380 posts

Joined: Feb 2002

i did this with the help of necrotic...but heres what you want to do:

create a javascript file, name if whatever you want (.js) with this:

var isIMG = document.images;
    function Hover(Arrowname,img) {
      document.images(Arrowname).src = '/img/'+img;
    }
'
then in your actual page have your links and images like this:
&lt;script type="text/javascript" language="javascript" src="/mymouseover.js"&gt;&lt;/script&gt;
<a href="/home.html" alt="[Home]" onmouseover="Hover('image0','/homeon.gif');" onmouseout="Hover('image0','/home.gif');"><img width="120" height="70" src="/img/home.gif" alt="[Home]" id="image0" /></a>
'
just customize the links. make sure each different image is a different image name.

E.g. the first set of images would be id="image0", the second id="image1", etc. just replace "image0" everywhere you see it with the correct number.

They have: 344 posts

Joined: Jun 2002

Yeah that works fine only it doesn't expand for me...is it meant to? Confused

He has: 1,380 posts

Joined: Feb 2002

just a note, the "

  • " aren't supposed to be there. the forums added them for some reason.
  • expanding? define

    He has: 18 posts

    Joined: Sep 2003

    IMHO, such a menu is not functional. I'd prefer the menuitems expanded at loadtime.

    They have: 344 posts

    Joined: Jun 2002

    Ok...well I want the menu to when mouseover...you get the image effect. can do that.

    But then it's when you click on the button, ie. click Match...it expands.

    Like on the Torquay site...

    Abhishek Reddy's picture

    He has: 3,348 posts

    Joined: Jul 2001

    Have a look around http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Navigation/

    There are a few ways to do this, and they depend on how you construct the menus... so check out hotscripts and javascriptkit.com for scripts and tutorials using the various methods. Smiling

    They have: 344 posts

    Joined: Jun 2002

    Thanks for the links.

    They have certainly provided some more ideas but does it have to be created using Javascript because I don't really know it too well.

    He has: 1,380 posts

    Joined: Feb 2002

    oops...sorry! i didn't know that you wanted an expandable menu!

    most likely JS or "DHTML" which is basically JS. i would recommend doing something like: http://www.dhtmlcentral.com/script/script.asp?id=25 and then customize it for your images instead of text.

    make sure your images are small and/or interlaced, unlike the site you reference to, because they load really slow...and i'm on DSL

    Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.