Veamos cómo anda ésto
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style>
a.botones{position:relative; z-index:100; text-decoration:none; cursor:default; vertical-align:top; }
a.botones img{border:0; margin:0 0 10px 0; vertical-align:top; }
a.botones:hover{z-index:101; background:none; }
a.botones span{display:none; }
a.botones:hover .boton0{display:block; position:absolute; top:15px; left:0; }
a.botones:hover .boton1{display:block; position:absolute; top:15px; left:-8px; }
a.botones:hover .boton2{display:block; position:absolute; top:15px; left:-15px; }
#imgn0, #imgn1, #imgn2{width:30px; height:10px; }
</style>
</head>
<body>
<h2>Ejemplo.</h2>
<a class="botones" href="http://www.forosdelweb.com/forumdisplay.php?f=4" title="(X)HTML "><img
src="http://www.forosdelweb.com/images/smilies/wink.gif" /><span class="boton0"> <img
src="http://www.forosdelweb.com/images/smilies/wink.gif" id="imgn0" /></span></a>
<a class="botones" href="http://www.forosdelweb.com" title="Foros del Web "><img
src="http://www.forosdelweb.com/images/smilies/biggrin.gif" /><span class="boton1"> <img
src="http://www.forosdelweb.com/images/smilies/biggrin.gif" id="imgn1" /></span></a>
<a class="botones" href="http://www.forosdelweb.com/showthread.php?t=356569"
title="Diferentes MouseOver's a una Imagen "><img src="http://www.forosdelweb.com/images/smilies/cool.gif" /><span
class="boton2"> <img src="http://www.forosdelweb.com/images/smilies/cool.gif" id="imgn2"
/></span></a>
QWERTYUIOP
<br />
QWERTYUIOP
</body>
</html>
Es para enlaces, como bien acotó
JavierB no tiene sentido si le agregas eventos de ratón para disparar escripts. Y si es para que no le aparezcan las capas amontonadas a quien tenga deshabilitado JS, se las ocultas con CSS y se las apareces si habilita javascript. Mientras tanto, que vea los
tooltips.