# Solved: Image Swap Using CSS



## blujein (May 13, 2008)

G'day,

I have a piece of CSS code that sets the three different elements for a link ('a:active', 'a:link', 'a:visited') and each three elements has a different background image, and yet when previewed in a browser, the only image being displayed is the image for 'a:link'.

I've included the CSS code I am using below:


```
A.Navigation:Active
	{
	background-image:url(../Images/Image0004.png);
	background-repeat:repeat-x;
	border-bottom:1px solid #00254a;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	color:#ffffff;
	display:block;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:12px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
	padding-top:4px;
	text-decoration:none;
	}

A.Navigation:Hover
	{
	background-image:url(../Images/Image0005.png);
	background-repeat:repeat-x;
	border-bottom:1px solid #00254a;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	color:#ffffff;
	display:block;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:12px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
	padding-top:4px;
	text-decoration:none;
	}

A.Navigation:Link
	{
	background-image:url(../Images/Image0006.png);
	background-repeat:repeat-x;
	border-bottom:1px solid #00254a;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	color:#ffffff;
	display:block;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:12px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
	padding-top:4px;
	text-decoration:none;
	}
```


----------



## caraewilton (Nov 7, 2007)

Hi. I think I understand what you want.

I use the following css to achieve a mouse over effect

CSS:

```
.mp {
	width:45px; 
	height:45px; 
	position:relative; 
	padding:0; 
	margin:0 auto 0 auto;
}
	
.mp em {
	background:url('images/index/powerpoint.gif'); 
	display:block; 
	width:45px; 
	height:45px; 
	position:absolute; 
	top:0; 
	left:0;
}
	
.mp a:hover em {background:url('images/index/powerpointem.gif');}
```
Html looks like this:

```
<div class="mp">
     <a href="tutorials/presentations/presentations.htm">
          <em title="Multimedia Presentations"></em>
     </a>
</div>
```
This works pretty well except that there is a slight delay the first time you hover on the picture so add the following element:


```
.pl {display:none;}
```
and at the bottom of my content page I add the following html

```
<img alt="powerpoint" src="images/index/powerpointem.gif" width="45" height="45" class="pl">
```
The picture does not display on the page, but it is loaded into the cache and consequently there should not be a delay the first time you hover.

Needless to say you can add a a:visited and what ever else you need, using this method.

It works in Opera 9.5, firefox 3, Safari 3 windows and IE 7. I have not tried it in older browsers. Maybe someone can try and let us know how IE 6 handles this.

You can see an example on my website.


----------



## blujein (May 13, 2008)

Thank you for that!

I actually realised, though, why my CSS code wasn't working. I had the link elements listed in the wrong order; they needed to be in the order of 'A.Navigation:Link', 'A.Navigation:Visited', 'A.Navigation:Hover' and 'A.Navigation:Active'.

Thank you for your quick response, though.


----------



## namenotfound (Apr 30, 2005)

caraewilton said:


> This works pretty well except that there is a slight delay the first time you hover on the picture so add the following element:
> 
> 
> ```
> ...


The only problem with that is if someone visits your site with a browser that doesn't support CSS (or has it disabled)
All those images at the bottom looks out of place.

see my attached screen shot


----------



## blujein (May 13, 2008)

Ah, that's worth keeping in mind; thank you for pointing that out.


----------



## caraewilton (Nov 7, 2007)

Thanks name not found, I must be honest and admit I had not thought about people who have CSS disabled or are using browsers which do not support CSS.

Just for the sake of it, I cleaned things up a little.

The "preload" images now appear next to the applicable text, although they are still not visible on a page with CSS enabled. Additionally, I have added the text "press" which only appears when CSS or pictures are disabled.


```
/* begin styles for image replacement  */
.mp{
	width: 45px;
	height: 45px;
	position: relative;
	padding: 0;
	margin: 0 auto 0 auto;
	line-height: 45px;
	vertical-align: middle;
	text-align: center;
}

.mp a:hover{background: #ffffff;}

.mp em {
	display: block;
	width: 45px;
	height: 45px;
	position: absolute;
	top: 0;
	left: 0;
}

.mp em {background:url('images/index/powerpoint.gif');}

.mp a:hover em {background:url('images/index/powerpointem.gif');}

.pl {display:none;}
```


```
<div class="mp">
     <a href="tutorials/presentations/presentations.htm">
          <em title="Multimedia Presentations">
               <img alt="powerpoint" src="http://forums.techguy.org/images/index/powerpointem.gif" width="45" height="45" class="pl">
          </em>
     press</a>
</div>
```
I have attached some screen shots of how things look with different options set on the browser.


----------



## blujein (May 13, 2008)

Nice work - thank you for all your help!


----------



## tomdkat (May 6, 2006)

If the Navigation class is for those anchors only, you should be able to put the non-background oriented styling in the Navigation class definition and then just swap the background when the various events happen, like this:

```
.Navigation
	{
	background-repeat:repeat-x;
	border-bottom:1px solid #00254a;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	color:#ffffff;
	display:block;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:12px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
	padding-top:4px;
	text-decoration:none;
	}

A.Navigation:Active
{ 	background-image:url(../Images/Image0004.png); 	}

A.Navigation:Hover
{	background-image:url(../Images/Image0005.png); 	}

A.Navigation:Link
{ 	background-image:url(../Images/Image0006.png); 	}
```
I haven't tried that but if that does work, that should eliminate the redundancy in your current style sheet which will allow it to load faster (less data to transfer and fewer style rules for the browser to process). 

Just a thought. 

Peace...


----------



## blujein (May 13, 2008)

Oh okay, I'll definitely give that a try! Thanks!


----------



## namenotfound (Apr 30, 2005)

That looks much better caraewilton, I like it.


----------



## blujein (May 13, 2008)

:up:


----------

