7 replies to this topic

[hobulus]

Hi All,

I have been searching the NET from head to toe to see if I can find a fairly straight forward way to make a navigation, with BG images that mouseover.... can anybody point me in the right direction.

I found this one....http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml... but it confused the hell out of me.

So I am feeling a little dumb right now, and could really use your help...

This is what I have so far.... now I know the CSS Nav is working, but it is all the same image. I want different images for each button.... example so far.....
Please help!

[austen]

You may want to read this article about CSS Sprites. I've used this method for navigation before and it works extremely well. If you read the whole article you should have a really good idea of how it works.

As far as your example goes, it shouldn't be hard at all to change into different images.

You currently have the background image of all of the navigation list elements that are anchors (links) set to the home image. To make different images, you could use similar code, but for every list element, make that <li> tag a class of it's own. For example:

CSS

.link1 a {
background: url(images/homebg.gif);
}

.link1 a:hover{
background: url(images/homebghover.gif);
}

In your html you would make say the first <li> element in your navigation like this <li class="link1">.

If you need some more help, let me know. I'm sorry if I've been a little unclear but I'm pressed for time at the moment, so I hope this at least gets you started.

P.S. Read that article on css sprites, they're a lifesaver... I can give you a more practical example if you'd like also, like using sprites in a navigation.

-Austen

[hobulus]

Hey Austen!

Thanks for the advice, as well as the link. Its very much appreciated! I will read the article on sprites with loads of interest!
Hold thumbs for me!

Just thought I would ask your opinion on the design?

[austen]

I like the design except for two things.

1. The grey colored bar that separates the header from the rest of the layout... what's its purpose? I think you would have a clear enough separation without that horizontal grey thing at all.

2. The top part of the design has some matching issues, it's easy to see. You can see the discolored image at the very top of the page.

Edit: is a redesign really necessary? the current page design for http://www.creativebrollies.co.uk looks pretty good already.


I see that you've got the basic rollovers setup, but I forgot to address the issue of the "flickering" effect. This effect is sort of like not having "preloaded" your images... but in css there is an easy fix for that.

set the main background for the containing element for each button to the image that is unactive (not the hover image) and this should fix the problem. That way, when you hover over each link it won't "disappear" for a second while the hover image pops up because the background will be in a different element. There is nothing wrong with tiling one background image directly over another to create this effect.

I'll show you a better example later if you still need it, but I've gotta get to class right now, so good luck!


-austen

Edited by austen, 20 September 2007 - 09:16 AM.

[Jacorre]

I have a tutorial on Rollover Images but using CSS rollovers is the better method since there's no javascript involved.

[Marc]

There's a handy method to do this in CSS that doesn't require any Javascript preloading and will keep your images from flickering between the "off" and "hover" states. You basically create one image with the two button states stacked on top of each other, and use the background-position property to switch between the two when you hover over the link.

It's actually very easy to do. Here's a link that explains it pretty well:
http://www.nowcss.co...llover-with-css

[hobulus]

Thanks for all the help, guys, I will have a look at all the tuts that you guys have offered. And will get the site ship shape! :-)

[austen]

Marc, on Sep 20 2007, 10:08 PM, said:

There's a handy method to do this in CSS that doesn't require any Javascript preloading and will keep your images from flickering between the "off" and "hover" states. You basically create one image with the two button states stacked on top of each other, and use the background-position property to switch between the two when you hover over the link.

It's actually very easy to do. Here's a link that explains it pretty well:
http://www.nowcss.co...llover-with-css

Thanks for the link, it shows how sprites can be used for a more practical navigation. Though if you read the entire article at the link above that I posted you should have a really good idea on how to do this. Dave shea is a great writer, and pretty much THE css master Anyway, hobulus, just post here when you've got something up and running, I'd like to see the outcome!

-austen