microsoft.com-ish navigation bar

Discussion in 'HTML & Website Design' started by cre8ive, Aug 11, 2008.

0
  1. #1
    I want to create a microsoft.com-ish navigation bar. More specifically, I'd like to have the following features:

    1. The background image/color change on mouseover

    1.2. I do not want to create a bunch of images with texts on them. I want each and every text to be plain text, i.e., text typed inside HTML.

    2. I want the whole area/rectangle surrounding a link text to be a link instead of the link text alone.

    3. Fade in/out rollover effect would be nice, but not necessary.

    I checked dynamicdrive.com, but I could not find a JavaScript or CSS script that does this. Where can I get a script to do this???
     
    cre8ive, Aug 11, 2008 IP
  2. sucka

    sucka Well-Known Member

    Messages:
    298
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    105
    #2
    Hy,

    you won´t need a script for this. Never heard about the hover function?

    Try using IDs.

    E.g.:

    html:

    <a href="#" id="Link1">Link</a>
    <a href="#" id="Link2">Link</a>
    <a href="#" id="Link3">Link</a>
    <a href="#" id="Link4">Link</a>

    css:

    a#link1 {
    background-image:black;
    display:block;
    }
    a:hover#Link1 {
    background-image:red;
    display:block;
    }


    a#link2 {
    background-image:black;
    display:block;
    }
    a:hover#Link2 {
    background-image:red;
    display:block;
    }


    a#link3 {
    background-image:black;
    display:block;
    }
    a:hover#Link3 {
    background-image:red;
    display:block;
    }


    a#link4 {
    background-image:black;
    display:block;
    }
    a:hover#Link4 {
    background-image:red;
    display:block;
    }

    Try to think about this a little and you´ll solve your problem quite fast.

    Please rep me if I helped you ^^

    Bye
     
    sucka, Aug 12, 2008 IP