CSS Image Mouseover Change

Get Started
1

Hi,

I am trying to do an image mouseover effect in CSS. I have tried a few options like the ones below but they are either out of date or I can’t get them to work.

Does anyone have a good CSS method for changing an image on mouseover?

http://csscreator.com/node/28450

2

a:link, a:visited {background-image:your.first.img}
a:hover, a:active {background-image:your.second.img}

3

A one image solution is to prefer. Read this AlistApart article how to use a sprite image for rollover:
http://www.alistapart.com/d/sprites/

An explanation of sprites: http://css-tricks.com/css-sprites/

4

Thanks Dr. John,

But how do I apply this? With a ‘class’ tag?

5

justlukeyou, it’s up to you, the important thing is you attach it to the correct tag, if you want it to only apply once (and not be reusable elsewhere on the same page) I would probably use an ID rather than a class attribute. It’s the same as any CSS code, you state where the element is (such as body #nav a:hover) and it’ll work :slight_smile:

6

Thanks guys,

I’ve got one method to work which moves the a double width image left, it works completely fine in Firefox and Chrome but in IE it pushes it one pixel further left.

http://technologydiscounts.co.uk/index2.html

I tried the method above but couldn’t get it work. Does anyone know the full code for replacing one image with another?

7

[QUOTE=justlukeyou;]
I’ve got one method to work which moves the a double width image left, it works completely fine in Firefox and Chrome but in IE it pushes it one pixel further left.
[/QUOTE]The one pixel shift I couldn’t see. Seems working ok. :slight_smile:

I tried the method above but couldn’t get it work. Does anyone know the full code for replacing one image with another?
You already have coded a working image-switching using a sprite image. :slight_smile:

But I think it is an image replacing you need here. In FF WebDevTool I tried this code on your link. Play with it to learn more:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
body{margin:0; padding:0}

.header {
	float: left;
	padding-top: 1&#37;;
	font-size: 11px;
	font-weight: bold;
	color: #969696;
	font-family: arial;
	width: 100%;
	padding-bottom: 5px;
}
.buynow {
	float: left;
	display: inline;
	margin:0 -400px 0 20px;
	overflow: hidden;
}
.buynow a {
	float: left;
	height: 86px;
	width: 497px;
	text-decoration: none;
	line-height: 86px;
	text-align: center;
}
.buynow img {
	float: left;
	display: inline;
	margin-right: -497px;
	border:0;
}
.buynow a:hover {
	visibility: visible;
}
.buynow a:hover img {
	margin-left: -497px;
	padding-right: 497px;
}
.top {
	float: right;
	display: inline;
	position: relative;
	margin: 10px 10px 0 0;
}
.top li {
	float: left;
	list-style: none;
}
.top a {
	margin: 0 10px;
	color: #f5a304;
	text-decoration: underline;
}
.top a:hover {
	color: #000;
}
</style>
</head><body>  

<div class="header">
	<ul class="top">
		<li><a href="/about">About Us</a>|</li>
		<li><a href="/contact">Contact Us</a>|</li>
		<li><a href="/help">Help</a></li>
	</ul>
	<h1 class="buynow"><a href="/"><img src="images/logo10.png" alt="" />www.technologydiscounts.co.uk</a></h1>
</div>

</body></html>

The code above works also with a transparent image and will fill all the CSS on/off image on/off criteria put here: Nine Techniques for CSS Image Replacement
You will find more methods here:Revised-image-replacement
And an even better one here: Heading replacment

8

I’m lost, my heads busting with 101 things and I can’t even remember how I got it to work yesterday.

In the IE on my desktop it juts to the side but on my desktop IE (which is the same) it remains in the same place!!!

Do you have a complete swap method?

9

This is the swap part. You can probably use it as it is.


.buynow a {
	display: block;
	height: 86px;
	width: 497px;
	overflow: hidden;
	text-decoration: none;
}
.buynow img {
	float: left;
	border:0;
}
.buynow a:hover {
	visibility: visible;
}
.buynow a:hover img {
	margin-left: -497px;
}


<h1 class="buynow"><a href="/"><img src="images/logo10.png" /></a></h1>
10

Dreamweaver has a “Image rollerover” function that makes life alot easier as well.

Also, there are a number of image rollover scripts for Javascript libraries, like prototype, jQuery, and Mootools.

Good luck :slight_smile: