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" />