is hover/rollover effect on image with css - possible? - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

is hover/rollover effect on image with css - possible?

deadhippo

2:55 pm on Jun 21, 2005 (gmt 0)

hover/rollover effect on image with css - possible?

well, i wanted to be able to swap image using css rather than javascript if possible but i dont know if this can be done
you can see the effect i want on the top left corner logo of the following address (javascript), it is only implemented on the home page at the moment

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 3:28 pm (utc) on June 21, 2005]

Sathallrin

3:21 pm on Jun 21, 2005 (gmt 0)

Start with using something like this:

#topimage {
background-image: url("image1.jpg");
}

#topimage:hover {
background-image: url("image2.jpg");
}

j4mes

3:26 pm on Jun 21, 2005 (gmt 0)

I believe you can use a div with background-url("image.jpg") and then use :hover, although I have doubts as to whether IE supports this directly.

This should work with both FF and IE (not mine, taken from <snip>).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.cssnav{
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(images/over.gif);
background-repeat: no-repeat;
display: block;
width: 125px;
height: 25px;
margin: 0;
margin-bottom:10px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 125px;
height: 25px;
display: block;
margin: 0;
padding: 0;
color: black;
text-decoration: none;
}
.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}
-->
</style>
</head>
<body>
<h1>Css Rollovers</h1>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>Products</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>News</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>Location</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>Products</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>News</span></a></div>
<div class="cssnav"><a href="#"><img src="images/normal.gif" alt="" width="125" height="25" /><span>Location</span></a></div>
</body>
</html>

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 3:30 pm (utc) on June 21, 2005]

deadhippo

5:59 pm on Jun 21, 2005 (gmt 0)

well this is the solution as given to me in another forum

Code:
#rollimage a {
display:block;
background : url(../images/topLogo_on.gif);
width:232px;
height:60px;
padding:0;
margin:0;}

#rollimage a:hover {
background : url(../images/topLogo_off.gif);}

works like a dream ...thanks for the ideas though

SuzyUK

6:10 pm on Jun 21, 2005 (gmt 0)

Hi deadhippo, thanks for letting us know..

works like a dream

That's one of the best ways to achieve this just now if you're doing rollovers on the links. The background image on an <a>anchor element is the easiest way because IE does not support the :hover pseudo class on any element other then an <a>nchor yet (without some extra scripting anyway).

It will be much easier when it does because then we will be able to able the hover directly to an image, like you asked, or indeed any other element ;)

Glad you got it sorted anyway
Suzy

deadhippo

12:10 am on Jun 22, 2005 (gmt 0)

thanks suzy, and ihope this will be helpful to others too

sorry for my breach in protocol, sometimes i get the sites rules mixed up
ill try to be more careful in hte future

MatthewHSE

12:58 am on Jun 22, 2005 (gmt 0)

The problem with applying image rollovers on anchors is that IE (lamely) fetches the replacement image from the server every time it's requested. This results in sluggish rollover effects and, often, a pretty tacky appearance.

The solution is to use single-image rollovers [wellstyled.com]. The concept is to use a single image that is comprised of each rollover state you want to use. You can then use the CSS background-position properties to position the background image so that the right portion of the image shows at each rollover state. For all its simplicity this really is a great technique, and it works superbly for me.