CSS Rollover Image With Only One Image


	CSS Rollover Image With Only One Image

travislaborde

11-2-2006 7:00 AM

299 views

tags:

programming, css

travislaborde says:

Apparently it's "mostly" compatible...

Add a Comment

Login to Comment. Not a member yet? Sign up

The Future Of Code, Digital And Genetic Co...

Favorite Programming Quotes

The Great Depression Hoax

MSNBC's Network Chief Down Plays The Pers...

Free Online Courses from Great Universities

OH voting machines contain critical vote-d...

More clips from travislaborde

How "The Price is Right" SHOULD Work :)

Pictures - Taken Just At The Right Time

THE BEST MAN TURNED OUT TO BE A WOMAN

Today's Top Clips

visit the Top Clips page

View the Top Clips from November 2, 2006

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/0c04d62b-6196-4d43-b55b-05a58c57191c/83F5C511-D4EB-4C8F-BA46-0CE974F1F78F/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/" href="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/" style="font-size: 11px;">www.findmotive.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><H2><A title="Permanent%20Link:%20Simple%20CSS%20Image%20Rollover" rel="bookmark" href="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/">Simple CSS Image Rollover</A></H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P>Back when I first started doing web development I used Javascript Image objects and onMouseOver and onMouseOut to make image rollovers for web pages. This worked well, but was kind of clunky and required 2 separate images.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P>Now I use CSS with only one image to do these same rollovers. You are basically just shifting the background image's X coordinate to give the rollover effect.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P>The following browsers support this:
<EM>IE 5.5+, Firefox 1.07+, Opera 7.23+, Mozilla 1.7.12+, Netscape 6.02+, Safari 2.0+, Konqueror 3.4.3+</EM></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P><B>Example</B>
</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P><B>The Image</B>
<IMG src="http://www.findmotive.com/wp-content/uploads/2006/10/pbox_close.gif" /></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P><B>CSS</B></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><DIV class="syntax_hilite"><SPAN class="langName">CSS:</SPAN>
<DIV id="css-1">
<DIV class="css">
<OL>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>a<SPAN>.srollover </SPAN><SPAN>{</SPAN></DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>    <SPAN>display</SPAN>: <SPAN>block</SPAN>;</DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>    <SPAN>width</SPAN>: 22px;</DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>    <SPAN>height</SPAN>: 22px;</DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>    <SPAN>background</SPAN>: <SPAN>url</SPAN><SPAN>(</SPAN><SPAN>"close.gif"</SPAN><SPAN>)</SPAN> <SPAN>0</SPAN> <SPAN>0</SPAN> <SPAN>no-repeat</SPAN>;</DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>    <SPAN>text-decoration</SPAN>: <SPAN>none</SPAN>;</DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV><SPAN>}</SPAN></DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV> </DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>a:hover<SPAN>.srollover </SPAN><SPAN>{</SPAN></DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV>    <SPAN>background-position</SPAN>: -22px <SPAN>0</SPAN>;</DIV>
</LI>
<li style="margin-left:16px;padding-left: 0px;">
<DIV><SPAN>}</SPAN> </DIV>
</LI>
</OL>
</DIV>
</DIV>
</DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><P><B>HTML</B></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.findmotive.com/2006/10/31/simple-css-image-rollover/"><DIV class="syntax_hilite"><SPAN class="langName">HTML:</SPAN>
<DIV id="html-2">
<DIV class="html">
<OL>
<li style="margin-left:16px;padding-left: 0px;">
<DIV><SPAN><A href="http://december.com/html/4/element/a.html"><SPAN>&lt;a</SPAN></A> <SPAN>class</SPAN>=<SPAN>"srollover"</SPAN> <SPAN>href</SPAN>=<SPAN>"#"</SPAN><SPAN>&gt;</SPAN></SPAN><SPAN>&nbsp;</SPAN><SPAN><SPAN>&lt;/a&gt;</SPAN></SPAN> </DIV>
</LI>
</OL>
</DIV>
</DIV>
</DIV></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/83F5C511-D4EB-4C8F-BA46-0CE974F1F78F/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Blog; Copyright; Privacy; EULA

Search Options

Related Clips

More clips from travislaborde

Today's Top Clips