Rollover Image with CSS

Meti · 29-08-2008, 05:59 PM

Hey,
I wonder if anyone knows the CSS and HTML codes of how to create a rollover image.
I don't want it to be a simple, with images. I want it to be two backgrounds, with text over them.
The text should be edit-able.

Do you know what I mean?
Something like www.smashingmagazine.com they're rollover navigation at top.

Excellent1 · 29-08-2008, 06:04 PM

Check the source.

Meti · 29-08-2008, 06:10 PM

Gahh. I'm not a good source viewer

Excellent1 · 29-08-2008, 06:13 PM

HTML Code:

<div id="header">
<ul>
	<li><a title="Home" href="http://www.smashingmagazine.com/" class="home">Home</a></li>
	<li><a title="Graphics" href="http://www.smashingmagazine.com/category/graphics/" class="graphics">Graphics</a></li>
	<li><a title="Showcases" href="http://www.smashingmagazine.com/category/showcase/" class="showcases">Showcases</a></li>
	<li><a title="Monday Inspiration" href="http://www.smashingmagazine.com/category/monday-inspiration/" class="monday-inspiration">Inspiration</a></li>
	<li><a title="Fonts" href="http://www.smashingmagazine.com/category/fonts/" class="fonts">Fonts</a></li>
	<li><a title="How-To" href="http://www.smashingmagazine.com/category/know-how/" class="know-how">How-To</a></li>
	<li><a title="CSS" href="http://www.smashingmagazine.com/category/css/" class="css">CSS</a></li>
	<li><a title="Tools" href="http://www.smashingmagazine.com/category/toolbox/" class="toolbox">Tools</a></li>
	<li><a title="Freebies" href="http://www.smashingmagazine.com/category/freebies/" class="freebies">Freebies</a></li>
	<li><a title="Tutorials" href="http://www.smashingmagazine.com/category/tutorials/" class="tutorials">Tutorials</a></li>
	<li><a title="Jobs" href="http://jobs.smashingmagazine.com" class="jobs">Jobs</a></li>
</ul></div>

Now check the style sheets for header.li.hover or whatever.

Meti · 29-08-2008, 06:23 PM

Thanks

I think i found the .css file. But my internet shuts down every time i try accessing it? :S

http://www.smashingmagazine.com/wp-c...genavi-css.css

Source · 29-08-2008, 06:29 PM

Best way todo this would be 2 images, you can do it in 1 and use co-ordinates to load a different part for rollover, but thats just a pain.

So here:

HTML Code:

/* This is for a .CSS */

.buttonhome {
      background: url(/images/normalhome.png);
}

.buttonhome:hover {
      background: url(/images/rolloverhome.png);
}

That should help you get a jist for it

MrCraig · 29-08-2008, 06:30 PM

Umm its more user-friendly if you do the graphics for the rollover images on top of each other, then just set the background-position to bottom to use the second image on the .class:hover{ } attrib.

Excellent1 · 29-08-2008, 06:32 PM

Originally Posted by MrCraig

Umm its more user-friendly if you do the graphics for the rollover images on top of each other, then just set the background-position to bottom to use the second image on the .class:hover{ } attrib.

Yah, thats the easiest option or you might get confused with the li's etc.

redtom · 29-08-2008, 06:35 PM

Originally Posted by MrCraig

Umm its more user-friendly if you do the graphics for the rollover images on top of each other, then just set the background-position to bottom to use the second image on the .class:hover{ } attrib.

Or you could add the image into a hidden div or a div with 0 height and width then the image is already preloaded, but you way works the same.

Meti · 29-08-2008, 06:37 PM

Should this work:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<style>
<!--
.buttonhome {
      background: url(images/normal.png);
}

.buttonhome:hover {
      background: url(images/rollover.png);
}
-->
</style>
<body>
<div id="buttonhome></div>
<div id="buttonhome:hover></div>
</body>
</html>

Thread: Rollover Image with CSS

Thread Tools

Rollover Image with CSS

Posting Permissions