Images in navi

Hi Guys!

I have a question. I know how to do the rollover in navigation, but now i would like to use images instead of letters.
I have this 2 images the darker one is for the link, and the white one is when you hover over the link. I just cant make it work.
Can you guys please help me!

Thank you in advance!

Attached Images

	navihome.png (36.2 KB, 62 views)
	hoverhome.png (35.5 KB, 56 views)

if the home tab was 'home.gif' and the dimensions 100x30, the code (i think) would go summat lyk this:
The HTML:

Code: Select all

<div class="rollover"> 
         <li>
           <a href="home.html"><img src="home.gif"        width="100" height="30" border="0"></a>        
         </li>
      </div>

The CSS:

Code: Select all

 
<style type="text/css">

.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { img: url(home2.gif)}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

</style>

I AM A BIT OF A NOOB,
so this may not work.

I tried it but no success, but thank you anyway.

Use the background switch method. Combine those two images so one is above the other.

Code: Select all

<a href="/" title="home" id="home">Home</a>

Code: Select all

a#home {
    width: 100px;
    height: 20px;
    text-indent: -5000px;
    background: #fff url("home.gif") no-repeat 0 0;
    display: block;
}
a#home:hover {
    background-position: 0 100%;
}

I can't remember if text-indent works inside <a> tags. If it doesn't, just apply text-indent: -5000 px; to the <ul> that the links are in.

i told you i was a noob... lol

You had the general idea, but the background switch method is better because it only loads one image so there is no flicker or need to preload.

I will try it now.
...other q may sound stoopid : does it matter if i use class or id? and should i use gif instead of png?

No, it doesn't really matter whether you use an ID or a class. ID's are good for anchors and JavaScript. Classes are actually more widely supported.

I tried it but it still not working....

Post the page up here, and we can trouble shoot, and see what you did wrong in the code...lol

The link I gave you is an example in case you missed it for some reason

I tried to modify the link you gave me Ryan, but i have no luck. Anyway, here is the link. http://www.flowerinstyle.co.uk/try.html.
As you see i have those images as navi buttons but i would like to have the white ones when hover.

Ryan I was wondering if you could explain that example to me, or listen to mine and then fill in the blanks, just hitting a wall whenever I get to a certain point!

Ok, so in the HTML you've set up your list items with links in them, named them appropriately and so on, and you've also given them text values of Home. Now in the CSS you've specified that any link in a list item will be indented off the page, so does that mean the the Text link in the link is wayyy off the page? You also specified that the background for each class is the appropriate gifs so does that mean, that only the gif will be seen, as the text is off-screen? I don't understand the hover part so perhaps you could explain that to me?

Thanks in advance,

Antwan

Ok! I have manage to do it! Here is the link http://www.flowerinstyle.co.uk/try.html
Thank you guys!
My other question is: how can i make the navigation, that Home will be the first and than galery and contact us?
Thank you 4 ur help!

yeah, the swapping's very smooth

Hi Chubbs,

The technique you're going after is tricky depending upon your doc-type. What I can do is recreate what I use on my websites.

Give me tomorrow and I'll post.

I've done it already check the link above...
But thank you !

Hey Chubbs,

I noticed you did get it "functioning" but; There is a cleaner way of doing it. To keep the XHTML and CSS clean as intended by its' purpose of separating content and design.

ohh... ok, so if you can post it later please? iwould like to see it.
Thank you!