Printable View
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.
Check the source.
Gahh. I'm not a good source viewer :P
Now check the style sheets for header.li.hover or whatever.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>
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
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:
That should help you get a jist for it :)HTML Code:/* This is for a .CSS */
.buttonhome {
background: url(/images/normalhome.png);
}
.buttonhome:hover {
background: url(/images/rolloverhome.png);
}
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.Quote:
Originally Posted by MrCraig
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.Quote:
Originally Posted by MrCraig
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>
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 :)
CSS selectors that have a ':' in are Pseudo-classes, and therefore are effects on the element preceding the colon.
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?!
No it doesn't. Our school do teach HTML but it only goes as far asQuote:
Originally Posted by e5
<html>
<head><title>HI</title></head>
<body>
Hi
</body>
</html>
Useless in my oppinion.
i loaded up the CSS incase you still need it