14 replies [Last post]
Gaia
Offline
Regular
in a box
Last seen: 15 years 11 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

hey,

I've searched and also googled this but cant really find what i'm looking for (or i dont understand what i've found Tongue).

But what i want to do is add a rollover effect to my navbar. My nav bar consists of 7 buttons (images). So, i have a total of 14. 7 for the rollover and 7 for the default.

I have no clue on how to acheive this with CSS. Here is my HTML that i want the rollover to take affect with.

<a href="index.php"><img src="images/nav_01.gif" alt="Home" title="Home" /></a><a href="http://forum.eternal-realm.net"><img src="images/nav_02.gif" alt="Forums" title="Forums" /></a><a href="index.php?action=downloads"><img src="images/nav_03.gif" alt="Downloads" title="Downloads" /></a><a href="http://forum.eternal-realm.net/viewtopic.php?id=34"><img src="images/nav_04.gif" alt="Tutorials" title="Tutorials" /></a><a href="index.php?action=projects"><img src="images/nav_05.gif" alt="Projects" title="Projects" /></a><a href="http://eternal-realm.net/topsites/"><img src="images/nav_06.gif" alt="Topsites" title="Topsites" /></a><a href="index.php?action=contact"><img src="images/nav_07.gif" alt="Contact" title="Contact" /></a>

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 12 years 6 days ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

css image rollovers

Gaia
Offline
Regular
in a box
Last seen: 15 years 11 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

css image rollovers

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

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 20 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

css image rollovers

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

Gaia
Offline
Regular
in a box
Last seen: 15 years 11 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

css image rollovers

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.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 20 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

css image rollovers

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css image rollovers

Gaia wrote:
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.

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Gaia
Offline
Regular
in a box
Last seen: 15 years 11 weeks ago
in a box
Joined: 2005-07-12
Posts: 45
Points: 0

css image rollovers

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

css image rollovers

Gaia wrote:
hmm, guess i could do without my fancy text >_<.

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.

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

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 20 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

css image rollovers

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.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 12 years 6 days ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

css image rollovers

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

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 13 years 41 weeks ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

css image rollovers

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>

DeprecatedDiva

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css image rollovers

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.

Verschwindende wrote:
  • CSS doesn't make pies

angizeb
Offline
newbie
london
Last seen: 13 years 26 weeks ago
london
Joined: 2007-03-27
Posts: 4
Points: 0

rollover image doesn't work in IE

This comment has been moved here.

angizeb
Offline
newbie
london
Last seen: 13 years 26 weeks ago
london
Joined: 2007-03-27
Posts: 4
Points: 0

rollover image doesn't work in IE

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/