CSS img roll over help!

[clanstyles]

Hey, I have

<a href="#"><img class="purchase" src="images/nav_purchase.gif" alt="Purchase" /></a>

.purchase {
width: 142px;
height: 28px;
margin-left: 285px;
position: absolute;
border: 0px;
}

.purchase a:hover { background-image: url(images/nav_purchase_roll.gif); }

 

now I need to roll over that img and have it work fine. It doesn't work... heh (img does exist).

[PHPQuack]

img is a child of a, in your code, which is in the order of "a img", but your calling .purchase (which is assigned to img) and than a

 

remove .purchase

 

e.g.

a:hover { background-image: url(images/nav_purchase_roll.gif); }

[clanstyles]

Sorry, you lost me lol..

 

I tried: a img .purchase a:hover{ background-image: url(images/nav_purchase_roll.gif); }

 

doesn't work.

[TheFilmGod]

Your complete code logic is flawed.

 

You can't use css to change markup. You can use stylesheets to "style" markup. In your code, you are trying to use css to change the img src="" tag in your markup. You can't do that.

 

Here is a sample of what you can do:

 

<a href=""></a>

 

a {
display: block;
width: 142px;
height: 28px;
background: url(images/nav_purchase.gif) no-repeat;
}
a:hover {
background: url(images/nav_purchase_roll.gif) no-repeat;
}

[ToonMariner]

better to have one image where you just shift the background position... stops the unsightly blank space on first load.

[lostprophetpunk]

<a href="#"><img class="purchase" src="images/nav_purchase.gif" alt="Purchase" /></a>

.purchase a:link {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

.purchase a:visited {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

.purchase a:hover {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase_roll.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

.purchase a:active {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

 

Just remember to adjust the height and width of the div depending on the padding.

[TheFilmGod]

<a href="#"><img class="purchase" src="images/nav_purchase.gif" alt="Purchase" /></a>

.purchase a:link {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

.purchase a:visited {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

.purchase a:hover {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase_roll.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

.purchase a:active {
width: 142px;
height: 28px;
margin-left: 285px;
        background-image: url(images/nav_purchase.gif);
        padding: 5px; /*Do whatever padding is necessary to align text */
position: absolute;
border: 0px;
}

 

Just remember to adjust the height and width of the div depending on the padding.

 

This is extremely poorly coded. It uses position: absolute, unless there is a special reason to use it, do not ever use position: absolute; .

 

It is unnecessary to add multiple declarations and specify their individual properties, when you can combine them. You should also never specify "margin-left" but say "margin: 0 0 __px 0;" instead. This is because you are letting the browser affect the margins. You don't want to use the default, you want to use what YOU want.

 

I hope that helps. I still recommend use the code that I posted earlier. It is cleaner and easier to customize.

[secoxxx]

should really keep both images togerther, like so

 

 

style being

 

.but {
height:41px; 
width:113px;
background:url(buttest.gif) left no-repeat;
}
.but:hover {
height:41px; 
width:113px;
background:url(buttest.gif) right no-repeat;
cursor:pointer; /*IE Hack*/
}

 

image container being

 

<a href="#"><div class="but"></div></a>

 

done, its that simple, plus you dont have multiple button images.

[secoxxx]

here is a example with the code.

 

http://thespotsearch.com/button.html

[haku]

You can make this:

 

.but:hover {

height:41px;

width:113px;

background:url(buttest.gif) right no-repeat;

cursor:pointer; /*IE Hack*/

}

 

shorter by using this:

 

.but:hover {

background-position: top right;

}

 

You don't need to re-declare statements in the hover state if they are the same as in the non-hover state.

[secoxxx]

nice, i never tried it like that fearing cross browser problems, but it works in FF and IE so good call.