Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Image Rollovers on hover

Newbie Question...

     

outlawthread

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

Inactive Member
Account Expired

 
 


is there a way to do a hover over an image, and make a different image show up in its place? how?
9:37 pm on July 31, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 4, 2004
posts:388
votes: 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!

9:38 pm on July 31, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 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!

9:42 pm on July 31, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 4, 2004
posts:388
votes: 0


Wertigon I never even thought of that! :) Simple is best, do that instead outlawthread.
8:01 pm on Aug 2, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 14, 2004
posts:388
votes: 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.

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

Preferred Member

10+ Year Member

joined:Apr 4, 2004
posts:388
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 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.

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

Preferred Member

10+ Year Member

joined:Apr 4, 2004
posts:388
votes: 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.

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

Preferred Member

10+ Year Member

joined:Jan 14, 2004
posts:388
votes: 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.