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 ).
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>
css image rollovers
css image rollovers
hmmm, is there anyway to do it without the use of javascript?
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.
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.
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.
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.
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.
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?
css image rollovers
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.
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.
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.
css image rollovers
I'm sorry, I posted the wrong link before. How about this?
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>
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.
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/