Here's an easy method to create CSS rollovers (in this example b1.gif and b2.gif are the two button states):

 

<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF="#">
<img src="b1.gif" class="nohover">
<img src="b2.gif" class="hover">
</A>

Thkz Ben and ErisDS....it really helped me a lot...

Thanks for posting this.

 

I have one problem which I hope someone can help me with. I'm using this code but I have the nav bar in the center of the page. It is basically the same as the original but a different graphics, obviously. I'm trying to get the bar to extend to the side of the browser, no matter what resolution/size the user is using. I thought of using a background image that repeats but this code already uses a background image.

 

How can I make this happen using CSS?

Hi,

 

Thanks for the comments.

 

You can apply a background colour with an image e.g. { background: #ccc url(menu.jpg) no-repeat 0 0; width 100%} - you'll need to set the position/repeat properties as you have to sit image centrally, but the #ccc - part means the background colour will span 100% width whilst keeping the main navigation images centrally.

 

Is that what you mean? If not, post the code you have and i'll try and assist you

http://www.fmlbadges.com/edentest/index.html

 

That is the site, if you look at my code, I did it by making a background of the image. That probably isn't a good way of doing it

 

You can see that the extensions of the menu bar would be an image. Hope that makes sense.

 

Thanks for the quick reply, btw.

Thanks for the quick reply, btw.

 

No trouble, ok i've checked out your site, the nav grey bar is spanning 100% width with the actual nav buttons sitting centrally. Did you want the nav buttons on the actual side and not centered?

I want the nav buttons to sit under the logo because I plan to have a search under the join now banner. Then I want the grey bar itself to reach to the end of the browser window.

Hi,

 

Sorry for the questions, but i've been on your website and what you are asking to happen, already seems to be working... See my screenshot attached

 

Green arrows indicated the 100% width of grey bar and Red arrow indicates the nav is sitting under the logo...

 

Am I missing something here?

 

Don't worry about all the questions, I appreciate the help.

 

If you look at my CSS, I'm actually using a background image in the body tag. So, the bar you see is actually part of the sites background not part of the navbar. I'm sure there must be a better way?

 

The problem is, in IE the background/nav bar don't match so I want to beable to position the navbar and I can't do that if it is part of the background image.

I've uploaded my current code, I've been trying to do this but still cannot get it right.

 

Clicky

 

I want it took look like the image posted above by Ben.

 

Thanks in advance for any help.

EDIT: nevermind, solved own problem.

 

Very useful tutorial!

Hi, thanks for the great tutorial, its taught me a lot about CSS (or rather more or less everything I know about CSS ) however I still can't get one thing to work...drop downs. I know its not intended to be there originally but I've spent several days now trying to add them to it with little success, can anyone give some pointers for adding them?

 

Many thanks once more.

Doesn't matter any more, I've finally worked out a way to do it, even if inefficiently. :)

Here's an easy method to create CSS rollovers (in this example b1.gif and b2.gif are the two button states):

 

<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF="#">
<img src="b1.gif" class="nohover">
<img src="b2.gif" class="hover">
</A>

Hi, I found your tutorial very helpful and it works great. Have you used this with any method of showing the current page you are on by having it display in the rollover state when you are on that page? I tried to use your rollover with the javascript method on this page http://www.richnetapps.com/automatically_highlight_current_page_in/ to create a current page marker but couldn't get it to work. Maybe it's because I'm not using a list and don't know how to call it up correctly.

 

Thanks,

L

Hi Ben,

 

Well done on the tutorial!

This was just what i was looking for and i will be trying it out, soon.

 

Thanks alot!

Thanks heaps for the tut, really easy to follow and works a treat

nice tutorial, very helpful!

 

Try as I might however, I cannot get the 'hover' to change image position. It stays on the top half of the image.

 

Basically followed your code but added a 5th button and changed some names around.

 

Any thoughts?

 

TIA,

Len

Just use a CSS sprite. Less requests, controllable from the CSS instead of inline HTML, and sometimes smaller file size.

 

This seems more of like a poor hack when you don't know how to do it correctly.

Made an account just to download this. Thanks. Was able to understand, and use this technique right away.

This was super helpful! Easy to understand and implement. Thanks.

Great sharing, I usually learn some new thing with these codes.I am glad to have member of this forum, good place to learn here.

Wow! Ben posted this originally in 2006 and it's still getting comments!