Sí, se puede. O más o menos.
Pero antes de ver el asunto, quiero hacer una aclaración. Recién ahora se me dio por ver tu ejemplo,
kseso?. En realidad lo había intentado, pero por culpa de
html, body {overflow: hidden;} no vi el botón, y cuando miré (muy por encima) el código fuente, encontré algo de CSS que no me pareció muy compatible y empecé a preparar mi propia versión. Que por supuesto, se parece mucho a la tuya, porque no hay tantas maneras de hacerlo, tampoco. En lo que de verdad no me había fijado (o no lo recordaba) era en que también usaste transiciones.
En fin, mi ejemplo es más compatible, pero tú lo pusiste primero.
Sigamos con el tema.
A ver si alguien me ayuda a entender cuál es el pequeño problema por el que al siguiente ejemplo le faltan "cinco p'al peso"
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TRANSICIÓN CSS.</title>
<style type="text/css">
body{font: 100% serif; }
#cambia {letter-spacing:1em; font-size:2em; font-weight: 900;
background-color:buttonface; color:ButtonText; }
#cambia:after {content:
url("http://img259.imageshack.us/img259/6365/fondoranab3xi.jpg"); }
#cambia:hover:after {content:
url("http://img160.imageshack.us/img160/5271/frenteranadh6.jpg"); }
</style>
</head>
<body>
<h2>Enlace que cambia imagen con
<tt>hover</tt>. </h2>
<p><a href="#" id="cambia">Cambiar.<br></a><br></p>
</body>
</html>
De momento sólo lo pude probar en
IE8, y resulta que la imagen no se inserta "después" del enlace sino "adentro", por lo tanto el
hover también funciona sobre ella.
Otra cuestión es que yo estaba convencido de que la etiqueta
anchor aceptaba
width. Pero me parece que ya no, en el ejemplo no le pude cambiar el tamaño; y necesito separar el link de la imagen, para que no queden una a continuación del otro (digo, por la alineación vertical y las alturas). Puede que sea por el
doctype, después lo pruebo. De momento, lo resolví agregando un
break después del texto del enlace, justo antes de cerrar.
Lo ideal sería ajustar el
content, y alejarlo lo suficiente como para cumplir más cabalmente con el pedido de
valusk, pero no sé cómo apuntarle con CSS o HTML, ya que
attr() solamente lee algún atributo, y lo muestra; no lo pasa.
Otra cosa que se me ocurrió fue "forzar" un ajuste de línea entre enlace e imagen aumentando el tamaño del texto. Pero no es serio.
Quisiera echarle la culpa de todo a
MS, aunque recuerdo por qué no me gusta usar estos efectos de CSS y ya no me animo. Todo es muy "borrador", todavía no es ciento por ciento usable. Ni siquiera "parchable". Queda aquí como una curiosidad.
Imágenes
[offtopic]
Cita:
Iniciado por kseso? Y si hubiese un premio, por ejemplo, hosting gratis, ¿alguien le entra?
No te preocupes, no estoy en condiciones de reclamar nada, pero resulta que hace unos meses (o años) quise hacer unas pruebas con punteros animados, y quise subir unos *.cur a Imeiyiyak.us, y no me los aceptó. ¿Ese hosting que conoces permitirá registrarse y subir archivos para que se vean desde otras páginas?, como pueden ser *.js, o *.cur . Ni siquiera los voy a usar para mí, sino para los ejemplos del Foro; pero este sitio ya no deja tampoco subir adjuntos, y para mostrar un par de inventos quedé muy limitado.
[/offtopic]