View Full Version : Mouseover image element?

07-26-2007, 06:05 AM
Is there a xhtml/css method for creating an image that changes on mouseover?

07-26-2007, 06:31 AM
you can use the :hover psuedoclass thru CSS, tho I don't believe its supported on anything except links by IE.


07-26-2007, 10:51 AM
Yes, so if you make it a link and assign a background image to the link and another when it is hovered, you can make it work.

07-26-2007, 05:58 PM
But you can also attach the :hover psuedoclass to any object, the only drawback being that IE doesn't support it.


07-26-2007, 10:29 PM
Can you show me what the code would look like to do that?

07-26-2007, 11:06 PM
I just made a page with my own rollovers. Might not be perfect, but here is what I did. I used a transparent gif (icon.gif) as the image encased in the link. It is 32px wide and 27px high. All of the images used in this technique are the same size.

EDIT: To clarify, I am using a background image that is showing through the transparent image in the page. When I hover over the link (the transparent image encased in the link), the other background image appears underneath. I am using the psuedo class hover to create this effect.

<a class="home" href="#"><img src="images/icon.gif" alt="Go to the Home Page" /></a>

Here is the CSS :

a.home {
background: url(../images/home.gif) no-repeat top left;
width: 32px;
height: 27px;

a.home:hover {
background: url(../images/home2.gif) no-repeat top left;

Here are the images:

Transparent Spacer (icon.gif) (http://www.ashleywalters.net/templates/business/businessasp/images/icon.gif)
Home Icon (http://www.ashleywalters.net/templates/business/businessasp/images/home.gif)
Highlighted Home Icon (http://www.ashleywalters.net/templates/business/businessasp/images/home2.gif)

You can see this rollover in action at http://www.ashleywalters.net/templates/business/businessasp/default.htm

It's the home icon in the gray bar beneath the banner. My actual CSS had some spacing and floating to it, but I posted the bare basics here to get the job done. Just know you will have to tweak the image if it is set as display:block and you want it positioned somewhere specific.

07-26-2007, 11:14 PM
Have a look at this part of my website. Is this what you want, get back to us.



07-26-2007, 11:17 PM
Here is the code.


<!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">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="generator" content="BestAddress HTML Editor Professional" />
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

z-index: 0;

background-color: transparent;
z-index: 50;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 6px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: .8em;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

.thumbnail:hover span {
visibility: visible;
position: absolute;
/* left: 0px; */
left: 162px;
/* top: -396px; */
top: 134px;
background-color: white;

<body bgcolor="lightyellow">
<a href="index.html"><img alt="Home page." src="home.jpg" width="42" height="32" /></a>

<a class="thumbnail" href="#thumb"><img src="112a.jpg" width="66px" height="44px" border="0" /><span><img src="112.jpg" width="648px" height="486px" border="0"/><br />Mr Keogh and Steven at John's wedding.</span></a>

<a class="thumbnail" href="#thumb"><img src="85a.jpg" width="66px" height="44px" border="0" /><span><img src="85.jpg" width="648px" height="486px" border="0"/><br />Steven relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2006.</span></a>

<a class="thumbnail" href="#thumb"><img src="92a.jpg" width="66px" height="44px" border="0" /><span><img src="92.jpg" width="648px" height="486px" border="0"/><br />Steven during a day trip to Eastbourne - summer 2006.</span></a>

<a class="thumbnail" href="#thumb"><img src="89a.jpg" width="66px" height="44px" border="0" /><span><img src="89.jpg" width="648px" height="486px" border="0"/><br />Steven, a few years ago. In the Peak District.</span></a>

<a class="thumbnail" href="#thumb"><img src="69a.jpg" width="66px" height="44px" border="0" /><span><img src="69.jpg" width="648px" height="486px" border="0"/><br />Steven enjoying the great outdoors,</span></a>

<a class="thumbnail" href="#thumb"><img src="110a.jpg" width="66px" height="44px" border="0" /><span><img src="110.jpg" width="648px" height="486px" border="0"/><br />The one above sees all!</span></a>

<a class="thumbnail" href="#thumb"><img src="steve-01a.jpg" width="52px" height="66px" border="0" /><span><img src="steve-01.jpg" width="486px" height="648px" border="0"/><br />Steven as a lad.</span></a>

<a class="thumbnail" href="#thumb"><img src="SteveandPhila.jpg" width="66px" height="44px" border="0" /><span><img src="SteveandPhil.jpg" width="648px" height="486px" border="0"/><br />Steven and Philip.</span></a>

<a class="thumbnail" href="#thumb"><img src="steve-02.jpg" width="66px" height="44px" border="0" /><span><img src="steve-02.jpg" width="648px" height="486px" border="0"/><br />A young Steven.</span></a>

<a class="thumbnail" href="#thumb"><img src="winhs13.jpg" width="66px" height="44px" border="0" /><span><img src="winhs13.jpg" width="648px" height="486px" border="0"/><br />A quiet read - a short break after visiting Winchester Cathedral.</span></a>

<a class="thumbnail" href="#thumb"><img src="Bluebell1.jpg" width="66px" height="44px" border="0" /><span><img src="Bluebell1.jpg" width="648px" height="486px" border="0"/><br />Steven, relaxing in one of the old First-Class carriages. On the Bluebell Line.</span></a>

<a class="thumbnail" href="#thumb"><img src="web17.jpg" width="66px" height="44px" border="0" /><span><img src="web17.jpg" width="648px" height="486px" border="0"/><br />Steven, Betty and Frank. Probably in the 1960's.</span></a>

<a class="thumbnail" href="#thumb"><img src="st7.jpg" width="66px" height="44px" border="0" /><span><img src="st7.jpg" width="648px" height="486px" border="0"/><br />On a day trip to Eastbourne - spring 2006.</span></a>

<a class="thumbnail" href="#thumb"><img src="st2.jpg" width="66px" height="44px" border="0" /><span><img src="st2.jpg" width="648px" height="486px" border="0"/><br />Not sure where this was taken.</span></a>

<a class="thumbnail" href="#thumb"><img src="st9.jpg" width="66px" height="44px" border="0" /><span><img src="st9.jpg" width="648px" height="486px" border="0"/><br />Philip and Steven at John's wedding.</span></a>

<a class="thumbnail" href="#thumb"><img src="st14.jpg" width="66px" height="44px" border="0" /><span><img src="st14.jpg" width="648px" height="486px" border="0"/><br />Not sure where this was taken.</span></a>

<a class="thumbnail" href="#thumb"><img src="st16.jpg" width="66px" height="44px" border="0" /><span><img src="st16.jpg" width="648px" height="486px" border="0"/><br />Steven and Betty in Wales.</span></a>

<a class="thumbnail" href="#thumb"><img src="st17.jpg" width="66px" height="44px" border="0" /><span><img src="st17.jpg" width="648px" height="486px" border="0"/><br />Steven holidaying in Wales.</span></a>

<a class="thumbnail" href="#thumb"><img src="st18.jpg" width="66px" height="44px" border="0" /><span><img src="st18.jpg" width="648px" height="486px" border="0"/><br />Betty and Steven many years ago.</span></a>

<a class="thumbnail" href="#thumb"><img src="st22.jpg" width="66px" height="44px" border="0" /><span><img src="st22.jpg" width="648px" height="486px" border="0"/><br />Steven in Hove - 2007.</span></a>

<a class="thumbnail" href="#thumb"><img src="st25.jpg" width="66px" height="44px" border="0" /><span><img src="st25.jpg" width="648px" height="486px" border="0"/><br />Betty, Mum and Steven. On holiday in Wales.</span></a>

<a class="thumbnail" href="#thumb"><img src="st26.jpg" width="66px" height="44px" border="0" /><span><img src="st26.jpg" width="648px" height="486px" border="0"/><br />Hi!, We're over here. Betty and Steve on a family holiday.</span></a>

<a class="thumbnail" href="#thumb"><img src="st28.jpg" width="66px" height="44px" border="0" /><span><img src="st28.jpg" width="648px" height="486px" border="0"/><br />Steven outside the "Saxon Arms" in Dorchester - 2007.</span></a>

<a class="thumbnail" href="#thumb"><img src="st32.jpg" width="66px" height="44px" border="0" /><span><img src="st32.jpg" width="648px" height="486px" border="0"/><br />Steven (and Little Ted) relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2007.</span></a>

<a class="thumbnail" href="#thumb"><img src="st39.jpg" width="66px" height="44px" border="0" /><span><img src="st39.jpg" width="648px" height="476px" border="0"/><br />Steven on holiday with friends.</span></a>