onmouseover/onmouseout effects without javascript

Hi all,

I'm trying to achieve the following goal: I want to use the "a" tag, and inside this tag I want to use the "img" tag, but I would like to apply that onmouseover/onmouseout effect that we easily have using javascript, but I would like to achieve the same effect only using css. Actually, I've already achieved such a goal, but I think I am doing that in a not so good way. See below:

<style type="text/css">
.effect, .effect:visited, .effect:active {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_out.gif");
}

.effect:hover {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_over.gif");
}
</style>

<a href="http://www.something.com" class="effect">
<img border="0" width="142px" height="20px"
src="very_little.gif" vspace="0" hspace="0"/>
</a>

The size of button_out.gif and button_over.gif is 142px and 20px. The size of very_little.gif is...uh... a very little size. The fact is that I need to use this very_little.gif to achieve my goal, and I would not like to use this artifice. I don't even know why exactly the very_little.gif image is necessary!

Please, help me!

PS: Sorry for crossposting. I posted the same question here:
http://www.csscreator.com/node/22000

 

if u wanna use only css for that first u must know that u can use :hover only for a link.U dont need to put <img> in html,u only need to define it in CSS, like background.

a.effect{
width: 142px;
height: 20px;
background: url("button_out.gif") no-repeat center center;
}
a.effect:hover {
width: 142px;
height: 20px;
background: url("button_over.gif") no-repeat center center;
}
U 2 do the same thing, just a little mess-up.
html <!-- u need to remove img from here -->
<a href="http://www.something.com" class="effect">something</a>
if u dont wanna to see "something", add this line in css:
a.effect{
width: 142px;
height: 20px;
background: url("button_out.gif") no-repeat center center;
text-indent: -9999px;
}
and that will move text"something" 9999px to the left and out of screen.

 

Thank you very much for your tips!!!

Actually, adding the "display: block" solved the problem. I don't even need that "text-indent: -9999em". See below the final solution that works perfectly:

a.effect {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_out.gif");
display: block;
}

a.effect:hover {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_over.gif");
display: block;
}

<a href="http://www.something.com" class="effect" />