Image hovers

MySpace Website Tutorials | Submited Dec 27, 2007

Written by: Mr. Evil

Notes

.codesThat {look-like: this;} go inside Style Tags.
The height and width need to be the same in both codes; you can get the height and width by right clicking and selecting properties.

The image:

<a class="hoverImg" href="#">
<img src="PRE-HOVER_IMAGE_URL_HERE" width="180" height="250"/>
</a>

:hover

Style Tags

.37182{hide the pre-hover image}
a.hoverImg img:hover{visibility:hidden;}

.37182{replace it}
a.hoverImg:hover{
display: block;
width: 180px;
height: 250px;
background-image: url(POST-HOVER_IMAGE_URL_HERE)
}

If you don't want the cursor to be a hand when you hover it
add this in the Style Tags

a.hoverImg:hover{cursor: default;}

If you're making a nav-bar..

then you'd use a list. Like so::.

<ul class="nav">
<li><a href="/">blahh</a></li>
<li><a href="/">blahh</a></li>
<li><a href="/">blahh</a></li>
</ul>

and inside your Style Tags:

.nav{list-style-type:none;}

.nav a{
padding: 10px 20px;
note:(we have to use padding in this case, 10px is for the top/bottom, 20px is for the left/right);
background-image:url(pre-hover_IMAGE_URL_HERE);
background-position:center top;
background-repeat:no-repeat;
background-attachment:scroll;
background-color:000;
}
.nav a:hover{
background-image:url(post-hover_IMAGE_URL_HERE);
background-position:center top;
background-repeat:no-repeat;
background-attachment:scroll;
background-color:000;
}