homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Image Rollovers on hover
Newbie Question...
outlawthread




msg:1218608
 9:22 pm on Jul 31, 2004 (gmt 0)

is there a way to do a hover over an image, and make a different image show up in its place? how?

 

j4mes




msg:1218609
 9:37 pm on Jul 31, 2004 (gmt 0)

Yup, but that's a Javascript thing.

It uses onMouseOver() and onMouseOut(). Try Googling for "javascript mouseover script". There are hundreds out there. Sticky me if you need any more help.

J.

Oh, and welcome to WebmasterWorld!

Wertigon




msg:1218610
 9:38 pm on Jul 31, 2004 (gmt 0)

Yes, there is, but due to some lack of functionality on IE's behalf, it only works for links. Try giving an anchor (<a>)element the id "anchor1", then do this:

#anchor1 {
width : 100px;
height : 20px;
background-image : url(foo.png);
}

#anchor1:hover {
background-image : url(bar.png);
}

Have fun! :)

Oh, and welcome to WebMasterWorld!

j4mes




msg:1218611
 9:42 pm on Jul 31, 2004 (gmt 0)

Wertigon I never even thought of that! :) Simple is best, do that instead outlawthread.

Bonusbana




msg:1218612
 8:01 pm on Aug 2, 2004 (gmt 0)

Or even better, make the images side-by-side; first the original then the hover image. If the image is 100px wide, the total image with the two states would be 200px. Then write something like:

yo.a {
display: block;
width: 100px;
height: 20px;
background: transparent url(img.jpg) no-repeat;
}

yo a:hover {
background-position: -100px 0;
}

<div class="yo">
<a href="#">link</a>
</div>

The benefitts are a flicker-free rollover effect because the images is loaded once at page load.

I hope this makes sence, do a google for css rollovers.

j4mes




msg:1218613
 9:07 pm on Aug 2, 2004 (gmt 0)

Sorry to pick this up Bonusbana...

Should be like this:

a.yo {
display: block;
width: 100px;
height: 20px;
background: transparent url(img.jpg) no-repeat;
}

a.yo:hover {
background-position: -100px 0;
}

<div>
<a class="yo" href="#">link</a>
</div>

yo.a should be a.yo and the <a> needs the class not the <div>.

Let's not confuse the poor guy :P but that's really good.

J.

createErrorMsg




msg:1218614
 1:30 am on Aug 3, 2004 (gmt 0)

Actually, the only typo in Bonus's post was using the class selector(.) on 'yo.a,' which needs a (decendant) space as in 'yo a'. Otherwise, I believe his example works fine. He's set the div class to 'yo' and stated that any <a>nchor tag decendants of 'yo' move the image. Since he's still put the :hover on the link, there's no problem.

This highlights the fact that css provides many ways to accomplish the same thing. I happen to like Bonus's way better, since <a>nchor tags tend to be overcrowded as it is (href with a url, title, etc). To me it's a little cleaner to try and limit class and id names to otherwise empty tags like <div>, <span> and <p>. I realize that's no more than a matter of preference, but there it is.

j4mes




msg:1218615
 10:17 am on Aug 3, 2004 (gmt 0)

I never realised you could do that with spaces :) it's great learnimg so much new stuff here.

But anyway, the reason I changed the code is that even replacing that "." for a " ", it doesn't work (no image appears) in either FireFox or IE. If you could tell us why and fix it so it's in the same style as Bonusbana's original that'd be great.

J.

Bonusbana




msg:1218616
 11:26 am on Aug 3, 2004 (gmt 0)

Sorry guys, I was in a hurry and didnt check my code. Here is the code that works:

.yo a {
display: block;
width: 100px;
height: 20px;
background: transparent url(img.jpg) no-repeat;
}

.yo a:hover {
background-position: -100px 0;
}

<div class="yo">
<a href="#">link</a>
</div>

Thanx for the heads up.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved