- This topic is empty.
-
AuthorPosts
-
February 6, 2010 at 2:23 pm #27901nutt318Member
Hello,
Well I have been trying to figure out how to do this for the last 3 or so hours with no luck. Was wondering if someone could point out what im doing wrong, or if there is a better way of doing it. Basically what im trying to do is when someone hovers over an image i want it to change from black and white to color.
My html file has:
My CSS file has:
Code:#truck { height: 123px; width: 180px; display: block; background: url(images/2b.png) no-repeat center center;}
#truck:hover { height: 123px; width: 180px; display: block; background: url(images/2.jpg) no-repeat center center; z-index: 50;}anyways, the first image shows up but when I hover over the image it doesnt go to the second one.
Thanks for the help
February 6, 2010 at 4:11 pm #70573TheDocMemberKill the z-index, you shouldn’t need it in this case.
There’s nothing glaring out at me about why this wouldn’t be working. The only thing you might be able to try is changing how the id is displayed in the CSS from "#truck" to "a#truck".
The reason I suggest it is the :hover has to be related to an anchor tag (I think).
February 6, 2010 at 5:16 pm #70574nutt318MemberWell I tried what you said but still no luck. Would there be another way to do this?
HTML
CSS
Code:a#truck { height: 123px; width: 180px; display: block; background: url(images/2b.png) no-repeat center center; padding-left: 4px;}
a#truck:hover { height: 123px; width: 180px; display: block; background: url(images/2.jpg) no-repeat center center; padding-left: 4px;}February 6, 2010 at 5:22 pm #70576nutt318MemberIts working now!, When I pasted the code into the forum here there was a funny character where there : is between truck and hover.
Anyways, its working now.
Thanks Doc!
February 6, 2010 at 7:10 pm #70579coryschadtMemberHere is another way to do it.
Combine both images into one. That way only one file will need to be loaded and you won’t ever have a flicker effect.
Cheers,
Cory
Code:a#truck {
display: block;
width: 180px;
height: 123px;
text-decoration: none;
background-image: url(images/truck.jpg);
}a#truck:hover {
background-position: -123px 0;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.