memoadian : no opines.
catpaw : Sigo sin entender.
Hay un detalle en el ejemplo que puse y que no aclaré por falta de tiempo (quise enviarlo apenas lo tuve funcionando). Tampoco es nada inventado, el 'detalle' es CSS3, pero ahora lo amplío.
Allí se usa para elegir el ícono que le corresponde a cada enlace un
title="". Esto fue porque no tenía los enlaces a cada sitio (en el original eran #'s). Pero resulta que ni siquiera hay que poner un tooltip ni una clase, se supone que el CSS "sabe" a donde apunta el link, y le da el ícono que le corresponde.
Por ejemplo, si en el engendro anterior el ancla "FOXTROT" apuntara a FdW, el HTML quedaría así
Código HTML:
</div>
<div class="cajas_icons">
<a href="http://www.forosdelweb.com/"><span>FOXTROT</span></a>
</div>
Y el CSS así
Código:
.cajas_icons a[href*="forosdelweb"]{
background-position: 0 -40px;
}
.cajas_icons a[href*="forosdelweb"]:hover{
color:red;
background-position: -40px -40px;
}
¿Menos mantenimiento que ése? ¡Lo único que debe tener el enlace es la ruta, lo demás se hace solo!
Por supuesto que también doy por hecho que los enlaces son siempre los mismos. Habrá uno, tres, cinco, pero si el sitio permite agregar enlaces para contacto, hay una cantidad limitada, porque no te vas a poner a hacer un ícono por cada sitio nuevo que te inventen.
Ahí veo uno para email, otro para Tw, otro para el tiempo, otro para FB, otro para YT y uno para el cumpleaños. Habrá un par más para escáip y mensajero, pero en cualquier caso, el número es limitado a las opciones para cargarlos. Así que la imagen única no es problema.
Ahora, si además de la ruta de destino, también quieres poner una ruta para la imagen ... ¿cuál era la dificultad, si eso es CSS 2.x? Es un hover común y corriente.
Código HTML:
<div class="cajas_icons">
<a href="#" style="background-image: url(images/iconos/facebook-double.png)"><span> algo </span></a>
</div>
Por último,
ni se te ocurra hacer el disparate de usar yaicuery por un hover. De última, se hace con JS.