Welcome to WebmasterWorld Guest from 54.145.39.186

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)

10+ Year Member



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

j4mes

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

Bonusbana

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month