View Full Version : Rollover Image with CSS
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 (http://www.smashingmagazine.com) they're rollover navigation at top.
Excellent1
29-08-2008, 06:04 PM
Check the source.
Gahh. I'm not a good source viewer :P
Excellent1
29-08-2008, 06:13 PM
<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.
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-content/plugins/pagenavi/pagenavi-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:
/* 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
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
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.
Should this work:
<!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>
MrCraig
29-08-2008, 06:49 PM
Nope.. dont need to put the <div id="buttonhome:hover></div>
bit in..
Could anyone send me a code which will work?
It works! I did it with your help :)
Thanks very much. You can see it at
www.metidesigns.com/rollover :)
It's not mupltiply post. it's new info :)
Hypertext
30-08-2008, 12:40 AM
CSS selectors that have a ':' in are Pseudo-classes, and therefore are effects on the element preceding the colon.
Source
30-08-2008, 08:52 AM
I loled @ that comment charlie. There was no need to be so Wikipedia about it considering he got what he wanted. Haha.
At school we did ours in dreamweaver lol :oo... does that help?!
Decode
30-08-2008, 10:22 AM
At school we did ours in dreamweaver lol :oo... does that help?!
No it doesn't. Our school do teach HTML but it only goes as far as
<html>
<head><title>HI</title></head>
<body>
Hi
</body>
</html>
Useless in my oppinion.
Jack!
30-08-2008, 01:31 PM
i loaded up the CSS incase you still need it
/* +----------------------------------------------------------------+ | | | WordPress 2.1 Plugin: WP-PageNavi 2.20 | | Copyright (c) 2007 Lester "GaMerZ" Chan | | | | File Written By: | | - Lester "GaMerZ" Chan | | - http://lesterchan.net (http://lesterchan.net/) | | | | File Information: | | - Page Navigation CSS Style | | - wp-content/plugins/pagenavi/pagenavi-css.css | | | +----------------------------------------------------------------+ */ .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF; } .wp-pagenavi a:hover { border: 1px solid #114477; color: #114477; background-color: #FFFFFF; } .wp-pagenavi span.pages { padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #000000; background-color: #FFFFFF; } .wp-pagenavi span.current { padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; } .wp-pagenavi span.extend { padding: 2px 4px 2px 4px; margin: 2px; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; }
Want to hide these adverts? Register an account for free!
Powered by vBulletin® Version 4.2.5 Copyright © 2024 vBulletin Solutions Inc. All rights reserved.