css image rollovers

See if this helps

hmmm, is there anyway to do it without the use of javascript?

I use this method of putting both rollover images in on image and then just adjust background image position to create the effect.

http://wellstyled.com/css-nopreload-rollovers.html

Ok, but i have a slight problem with that way.

Their html is

<a href="">One more (5)</a>

But mine doesn't have text in the center becuase my text is on the actual image.

if you want to do that with css you have to use the background-image property...

does it need to by an image? can you use text at all? I can't see by the example you posted.

As gleddy points out, you're better off putting your image in via background: url(....) and actually having text in your link (search engines like it better and it's more accessible).
The technique gleddy posted is one I use quite frequently. Here's the code for a nav menu that I've just done for a site we're working on:

		<div id="navcontainer">
			<ul id="nav">
				<li id="home"><a href="#" title="Return to the home page">Home</a></li>
            	<li id="school"><a href="#" title="School information">School</a></li>
				<li id="students"><a href="#" title="Student information">Students</a></li>
				<li id="reports"><a href="#" title="Reports and tests">Reports</a></li>
				<li id="info"><a href="#" title="Information about InfoEd and FAQs">Info</a></li>
				<li id="help"><a href="#" title="Help and Support">Help</a></li>
			</ul>
		</div>

/*----------------- Navigation -----------------*/
#navcontainer { height: 30px; background: url(images/navborder.gif) no-repeat bottom right ; }
ul#nav	{
	height: 24px;
	width: 450px;
	position: relative;
	top: 5px; 
	left: 315px;
	background: transparent url(images/nav.gif) top left no-repeat;
}

ul#nav li {
	position: absolute;
	list-style: none;
	top: 0;
}
	
ul#nav li, ul#nav a { height: 20px; display: block; }
ul#nav li a { text-indent: -9999px; text-decoration: none;	}
	
#home { left: 0; width: 52px;}
#school { left: 69px; width: 80px;}
#students { left: 160px; width: 88px;}
#reports { left: 262px; width: 68px;}
#info { left: 344px; width: 46px;}
#help { left: 405px; width: 46px;}

#home a:hover { background: transparent url(images/nav.gif) no-repeat 0 -30px; }
#school a:hover { background: transparent url(images/nav.gif) no-repeat -69px -30px;}
#students a:hover { background: transparent url(images/nav.gif) no-repeat -160px -30px; }
#reports a:hover { background: transparent url(images/nav.gif) no-repeat -262px -30px; }
#info a:hover { background: transparent url(images/nav.gif) no-repeat -344px -30px; }
#help a:hover { background: transparent url(images/nav.gif) no-repeat -405px -30px; }

Page can be seen at: www.kbs.com.au/temp/
It's the nav at the top, not the one down the side.

hmm, guess i could do without my fancy text >_<. I'll fiddle with your css Tyssen and see what i come up with.

So, other then that there is no real easy and simple way to swap 2 images in css and also link them?

You don't have to do without your text on your image - you can have whatever you want on your image, but rather than putting an <img> tag in your HTML, you have the image in your CSS and use the text-indent: -9999px to remove the text from view.

I may have confused you slightly by posting an example that uses a single image for both on & off states of all the links, but the same principle can be applied using separate images as in the example gleddy posted.

there was a really good post on this forum somewhere where one of the guys compared three different css rollover techniques and figured out which one was best...

have a search, it explains each technique well.

I'm sorry, I posted the wrong link before. How about this?

I used the technique discussed wherein a single image is used for all buttons and it is simply shifted to show a different portion of the image for the hover and active modes. The text is added through the mark up on the page. Let me see if I can find the link again....

Here it is!
http://wellstyled.com/css-nopreload-rollovers.html

I'm actually using that technique with the menus on my site (http://www.soulgazersundries.com/)

The basic code is:

<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
text-align:center;
}
a.menuitem {
display:block;
background: url("button.gif") 0 0;
color: #093060;
font-family: Papyrus, sans-serif;
font-weight: bold;
width:120px;
}
a.menuitem:visited {
background: url("button.gif") 0 0;
color: #808;
}
a.menuitem:hover {
background: url("button.gif") -120px 0;
color: #b22a2a;
}
a.menuitem:active {
background: url("button.gif") -240px 0;
color: #633100;
}
</style>
<title>test</title>
</head>

<body id="index">
<ul>
<li><a class="menuitem" name="#" id="btnindex">Home</a></li>
<li><a class="menuitem" href="#" id="btncatalog">Catalog</a></li>
<li><a class="menuitem" href="#" id="btncontact">Contact</a></li>
<li><a class="menuitem" href="#" id="btnsitemap">Site Map</a></li></ul>
</body></html>

That's exactly the way it should be done.

Just to clarify:

1) The link image is set as the background.
2) The link text is given a negative text indent, so it doesn't show.
3) The :hover state moves the background image.

This comment has been moved here.

Mod edit/ Please ignore this comment and refer to the link above this for link trail to current post.

hi

can you help me please - i have done the rollover navigation but for some reason it does not work in IE - only safari..... when you hover over image it disappears istead of coming up with the hover image

take a look at link:
http://angelazeballos.com/1callweb/