Hi,

 

I have created a very simple and easy to configure CSS Image Rollover Tutorial that uses only one image so there's no loading times for the rollover states, resulting in smoother transitions.

 

It works by containing the normal and rollover states in one image, we simply use the css to move the image into it's hover state when a mouse is rolled over (see attached image). It's all controlled by ul and li html.

 

I have included a .zip containing the source with comments and the image used so you can see how it works and tweak it to suit your needs.

 

CSS Code:

<style type="text/css">

#navigation ul {
width: 320px; 
height: 30px; 
position: absolute;
top: 100px; 
left: 300px; 
background: url(menu.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}
#navigation li {
display: inline;
}
#navigation li a:link, #navigation li a:visited {
border: none;
width: 80px; 
height: 30px; 
display: block; 
position: absolute; 
top: 0; 
text-indent: -7000px;
outline: none;
}
#navigation li.blue a:link, #navigation li.blue a:visited { 
left: 0;
}
#navigation li.green a:link, #navigation li.green a:visited { 
left: 80px 
}
#navigation li.orange a:link, #navigation li.orange a:visited { 
left: 160px  
}
#navigation li.red a:link, #navigation li.red a:visited { 
left: 240px  
}

#navigation li.blue a:hover {
background: url(menu.jpg) no-repeat 0 -30px; 
}
#navigation li.green a:hover {
background: url(menu.jpg) no-repeat -80px -30px; 
}
#navigation li.orange a:hover {
background: url(menu.jpg) no-repeat -160px -30px;
}
#navigation li.red a:hover {
background: url(menu.jpg) no-repeat -240px -30px;
}

</style>

 

HTML:

<div id="navigation"> 
<ul>
	<li class="blue"><a href="#">Blue</a></li>
	<li class="green"><a href="#">Green</a></li>
	<li class="orange"><a href="#">Orange</a></li>
	<li class="red"><a href="#">Red</a></li>
</ul>
</div>

 

Image: (Attached)

 

Live example: Click here

 

Easy as that! As I say the .zip contains comments within the stylesheet so you know what each element does.

 

Any questions let me know.

 

Hope you find a it useful

CSS_Image_Rollover_Tutorial.zip

Great tutorial - saves me from writing one! I did mean to, but haven't had time!

 

the only thing I would change is adding outline:none; to the following:

 

#navigation li a:link, #navigation li a:visited {

border: none;

width: 80px; /** width of the button in active state **/

height: 30px; /** height of the button in active state **/

display: block;

position: absolute;

top: 0;

text-indent: -7000px; /** Removes li text from the screen **/

outline:none;

}

 

as this remove the annoying dotted outline you get around links - as you've indented the text by -7000px the dotted line goes right across the screen and I think it looks ugly - so I always use the outline:none; to remove this. Not sure if this has a bearing on accessibility though.

Hi Evie,

 

Thanks, I'v added the outline: none; style and it is still w3c compliant.

 

Have amended the code and re-uploaded the .zip

 

Thanks

cool - glad to help. The outline thing isn't necessary but does make things look better.

Nice tutorial!

Interesting code

I knew about this technique, but i'd use separated images for each of the buttons.

Right now i use background rollovers, because i think it's just easyer, but this does load faster indeed.

Might swith, but with each link it's own image tho i think it would be easyer t edit that way.

got any more tutorials like this ??

it's really good!

If I had the time I would write a few...but too busy at the moment - what would you want tutorials on? If you list a few things you're interested in learning, then we can make tutorials that are actually wanted - hey lets start a tutorial request thread!

good idea

I'm up for that!

 

Oli

If I had the time I would write a few...but too busy at the moment - what would you want tutorials on? If you list a few things you're interested in learning, then we can make tutorials that are actually wanted - hey lets start a tutorial request thread!

 

Great stuff, I think useful CSS tips and techniques that alot of us overlook, I always think back to the days when I was learning and what could have been useful.

 

I also think Graphics tutorials, could be simple as adding a gradient or a drop shadow etc or maybe some useful flash tips?

 

What do you think?

 

 

good idea

I'm up for that!

 

Oli

 

 

Great Stuff Olivier, always looking forward to your stuff You did some good Flash banners at work this week

thank you ben :Db:

 

as E said, I think it'd be cool to get some requests so we can write things that are needed and will get used

I've learnt a few cool CSS tricks recently so could write a couple of tutorials - if I get time this w/e I will.

Looking forward to it

Excellent stuff guys! Nice to get some developments, you will see i'v re-arranged the forums!

 

Looking forward to some tutorials. I too will do some Fireworks tutorials soon.

When I want to create image rollovers most of the time I use Dreamweavers method, I like the option to pre-load the hover images

 

Wildo

Cheers, it's just a different take on your average rollover. Plus the hover effects are seamless and very smooth without having to pasue for image loads.

 

Glad you like.

ok - just to recap with the tutorial - if someone has images disabled as that's the way they view the web - some people do - your navigation buttons disappear and as your text is indeneted 7000px to the left the text doesn't appear either - how do you over come this? I'm trying to imrove my website at the moment for better accessibility and have unfortunately used the text indent thing on my navigation...this is ok if the style sheet is disabled as the text links appear, but if someone has images disabled there is no navigation visible.

 

Anyone have any ideas?

I can't wait for the release of the new CSS where we don't have to use images for the round corners. Very intimidating that they are taking their sweet time.

 

Great tutorial - saves me from writing one! I did mean to, but haven't had time!

Yea same here. I think I ignored writing a tutorial for all the basics of CSS since it can be found all over the web. I think some of us should gather and write one big tutorial.

that doesn't answer my question at all ???

Eskymo - Try this example

 

http://www.sitepoint.com/article/header-images-css-xhtml

 

It overlays the image over the top of the text and therefore is much more accessible. The only problem I can see with it is that the text may be cropped in the box if the text size is enlarged but it's still a better alternative to using negative text indent or negative absolute positioning.

 

Also, I'd advise against removing the outline on links as suggested earlier as this will cause problems with accessibility for users who don't use a mouse for navigation.

 

Some users may simply use a keyboard or other device for tabbing between links and this outline serves the purpose of displaying where the focus currently lies. Removing outline will make the site completely unusable for this set of users.

 

Hope that helps.

I know I've stopped using the outline:none for exactly that reason.

 

Thanks for the link - I will give that a go.

Oh sorry Eskymo, I didn't notice your post. I think we were typing our posts at the same time. I ran to class after I posted and therefore I could not. Dave Woods actually has a point. You may want to give that a go. I normally stay away from outline:none and use the wireframe menu, that allows flexibility. If you want a sample of my wireframe, you could take a look at it here: http://mahmedin.info/ (its the horizontal navigation under the title image).

Hi there, thanks for the great tutorial, however I am using it for a horizontal navigation bar across the top of a site and each button is a different width. I have created the graphic but can't see where to change the widths for each of the elements?

 

Presume this part of the CSS is stating that all the boxes should be 80px?

 

}

#navigation li a:link, #navigation li a:visited {

border: none;

width: 80px;

height: 30px;

display: block;

position: absolute;

top: 0;

text-indent: -7000px;

outline: none;

}

 

I have 5 buttons in total. Do I set the width for each one individually and then delete this width?

 

Any help most welcome.

If you have the graphic all different widths then you will need to set the width of each button plus the left position of each button and the left position for the background image for the hover.

 

 

Perhaps for differing widths you should use a repeating background image for each li so it doesn't matter what the width is, or use the sliding doors technique instead?

http://www.alistapart.com/articles/slidingdoors/

Hi Guys,

 

Ben I hope you don't mind. I have been playing with your tutorial today and have created a vertical version.

Thought I'd share it as it's cool to have both in the same place.

 

I have removed outline:none per the discussion here.

 

The main change is to #navigation li :

 

which has changed from

#navigation li {
	display: inline;
}

to

#navigation li { 
width: 80px;
height: 30px; 
}

 

The rest of the changes are mostly changing width and heights and movements so that it goes in the right direction.

Effectively all settings for "left" and "top" are switched around, as we now want the hover to move right and down rather than up and left.

 

The zip file includes the HTML file and a re-oriented image. It's all Ben's work really

 

Eris

CSS_Image_Rollover_Tutorial_Vertical.zip

Fantastic code, SO useful!

Thanks Ben! This is really helpful!

No problem, glad it could be of use to you

Thx Ben, and ErisDS, that was really helpful.

 

..but.. can one of the buttons be always pressed? Only with external css file?

 

edit: solution found

Great tutorial - saves me from writing one! I did mean to, but haven't had time!

 

the only thing I would change is adding outline:none; to the following:

 

#navigation li a:link, #navigation li a:visited {

border: none;

width: 80px; /** width of the button in active state **/

height: 30px; /** height of the button in active state **/

display: block;

position: absolute;

top: 0;

text-indent: -7000px; /** Removes li text from the screen **/

outline:none;

}

 

as this remove the annoying dotted outline you get around links - as you've indented the text by -7000px the dotted line goes right across the screen and I think it looks ugly - so I always use the outline:none; to remove this. Not sure if this has a bearing on accessibility though.

 

Using 'overflow: hidden' instead of 'outline: none' will shrink the dotted line to the correct size.

 

James

Pardon me if I am butting in in the wrong place... I can make rollovers, no problem, but I cannot figure out how to do the "change apperance to second image on click".. If you understand what I mean.

Here is the site, and what I need is the tabs to change to white when clicked. The rollovers only have two images.

Hi boblet.

 

I think I can help you there, someone posted about this before and I've used the method ever since. Basically, you need to change your <body> tag to <body id="home"> on the home page, and on the "om" page change it to <body id="om">

 

Now, in your external CSS style sheet (styleEllen.css), you're going to need to create an id like this;

 

#home #menu .brolloverH {

background-position: -34px 0;

}

 

As you can see, now whenever a user is on your home page, the body tag will now be given the id "home", and that id home changes the appearance of your index.php link to appear as if it is always being hovered over.

 

Now you can duplicate this effect onto the rest of your links, for example;

 

#om #menu .brolloverK {

background-position: -20px 0;

}

 

I hope you understand what I've said, if not feel free to question!

MolotovRuss – you have been a big help! Many, many thanks!

Nice post. I've used similar stuff on previous design jobs, works well.

MolotovRuss – you have been a big help! Many, many thanks!

 

No problem

No problem

 

 

.. no need of doing or learnign this things www.zimplit.org check this site will take to your levels

hi ben, i wanna know what if i want to do a multi level dropdown menus ? .. using this code. . how can i amend it to make it a multi level ?

Thanks for this, really cool!

Thankyou very much, for a great tutorial. I can now solve the problem I had with links on my site!

Very Nice tutorial... thanks for putting so much of efforts...