Hello,

 

I'm trying to set up a rollover-image navigation menu on my website using CSS, but only using a single image for the entire menu. It's a vertically-oriented menu that is 15 links long. I've already made the image for it (attached); I have placed the rollover images to the right of the normal images. The menu is 180px wide, 480px tall (so each link is 180x32). Is it possible to use CSS to move only a certain part of the image over when you scroll over the link to make this type of menu work? Or will I need to create 15 separate images? I was just thinking it'd be terrible to have to load 15 images when I could make it one, if that's possible.

 

Thanks,

Showtime

http://www.webdesignerforum.co.uk/index.php?showtopic=270

 

tutorial there

That is a horizontally-oriented menu though; I'm trying to do it with a vertical one. Any tutorial for that?

That is a horizontally-oriented menu though; I'm trying to do it with a vertical one. Any tutorial for that?

 

Simply change the background position and if needed the width/height.

It's the same principles, you just need to adjust a few settings.

 

Like take the display:inline off the li items (to make it vertical).

 

And then change some of the image positions to suit.

Just because the tutorial is horizontal and your images are vertical it doesn't change how it is done, the basic idea is still the same. You map out where the start top left of the image you want to use is using the horizontal and vertical background positioning within the class that you create, just like that tutorial shows you how to do.

 

The only difference in the css is that in your li tag you wouldn't have display: inline;....as that is what makes the menu horizontal rather than vertical.

Alright thanks guys I'll see if this works.

I tried a couple of tutorials, and found this one the easiest to follow. And I it worked great: http://ghettocooler.net/2007/05/31/simple-...ge-replacement/

Great news! I got it to work on my browser to perfection! There was a vertical version posted in that thread I didn't see, thanks for the help everyone.

Glad you got it working Good thing is, you'll always know how to do it now, and where to go for a re-cap. That's one thing down, thousands more to go

Yes it's always cool to learn new things like this. Glad this forum offers this kind of help for people like me.

One last question, how would I center a horizontal rollover menu on any page?

 

I tried using this:

 

position: absolute;
left: 50%;
margin-left: -325px

 

but it always ends up moving my menu all the way to the right, no matter what margin-left is. This method for centering worked before I changed it to a rollover menu (used div tags and three image links before), anybody have an idea what the problem is?

Got a link? or a little more code? (html and css).

link: clicky (it's the menu at the top)

 

full code:

 

<style type="text/css">
#headerlinks ul {
width: 675px; 
height: 60px; 
position: absolute;
top: 30px;
left: 200px;
background: url(http://www.eteamz.com/EOVBAA/images/vistahoverlinks.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}
#headerlinks li {
display: inline;
}
#headerlinks li a:link, #headerlinks li a:visited {
border: none;
width: 225px;
height: 60px;
display: block; 
position: absolute; 
top: 0; 
outline: none;
}
#headerlinks li.news a:link, #headerlinks li.news a:visited { 
left: 0;
}
#headerlinks li.photos a:link, #headerlinks li.photos a:visited { 
left: 225px;
}
#headerlinks li.events a:link, #headerlinks li.events a:visited { 
left: 450px;
}
#headerlinks li.news a:hover {
background: url(http://www.eteamz.com/EOVBAA/images/vistahoverlinks.jpg) no-repeat 0 -60px;
}
#headerlinks li.photos a:hover {
background: url(http://www.eteamz.com/EOVBAA/images/vistahoverlinks.jpg) no-repeat -225px -60px;
}
#headerlinks li.events a:hover {
background: url(http://www.eteamz.com/EOVBAA/images/vistahoverlinks.jpg) no-repeat -450px -60px;
}</style>
<div id="headerlinks">
<ul>
<li class="news"><a href="http://eovbaa.com/news"></a></li>
<li class="photos"><a href="http://eovbaa.com/photos"></a></li>
<li class="events"><a href="http://eovbaa.com/events"></a></li>
</ul>
</div>

 

The CSS loads along with the "Welcome" message section.

 

Also if it makes any difference I'm trying to optimize for IE since that is what's most widely used by people who will visit the site.