Rollover con css

valusk · #1 (**permalink**) 30/08/2010, 11:11

Buenas tardes... quisiera que cuando paso el mouse por un boton una imagen fuera de él cambiara.. es decir.. no quiero que la imagen del boton cambie... sino una que este fuera de él.
Nose si esto es posible hacerlo solo con css.. por eso mi duda.
Bueno espero que alguien me pueda ayudar
Gracias.

TheDark03 · #2 (**permalink**) 30/08/2010, 11:29

Cita:

Iniciado por valusk

Nose si esto es posible hacerlo solo con css.. por eso mi duda.
Gracias.

Hola,
despejo tu duda, lo que deseas realizar No se Puede aplicando solo css,
creo que deberías pedir que muevan tu post al foro más adecuado te sugiero al de Javascript

Saludos DTB

valusk · #3 (**permalink**) 30/08/2010, 11:32

Muchas Gracias... ya me parecia que era medio imposible.

kseso? · #4 (**permalink**) 30/08/2010, 13:15

Cita:

Iniciado por TheDark03

Hola,
despejo tu duda, lo que deseas realizar No se Puede aplicando solo css,
creo que deberías pedir que muevan tu post al foro más adecuado te sugiero al de Javascript
Saludos DTB

¿Está usted seguro?
Procuremos ser algo más R-I-G-U-R-O-S-O-S en las respuestas, y un poco menos categóricos. Deje algo de campo a la duda.

Valusk:
¿Tiene algo de código elaborado? Publique su html (generado) y el css asociado.
También y pensando en utilizar código válido, ¿qué doctype utiliza?

Mientras, una pista: selectores de adyacentes, de hermanos,

nakiox · #5 (**permalink**) 30/08/2010, 17:26

kseso... eeee queee... con css no se puede.
El muchacho tiene razón.

Eso es javascript o un framework del mismo (jquery si queremos ser chics)

Saludos!

kseso? · #6 (**permalink**) 30/08/2010, 17:50

Cita:

Iniciado por nakiox

kseso... eeee queee... con css no se puede.
El muchacho tiene razón.

Eso es javascript o un framework del mismo (jquery si queremos ser chics)

Saludos!

Está fea la autocita, pero a usted, por incidir, se lo resalto en negrita, pues más feo es aseverar tan categóricamente algo que ya se ha indicado previamente como erróneo sin argumentar o aportar base para repetir la afirmación.

Cita:

Iniciado por kseso?

¿Está usted seguro?
Procuremos ser algo más R-I-G-U-R-O-S-O-S en las respuestas, y un poco menos categóricos. Deje algo de campo a la duda.

Y ahora ya le digo, que sin más condicionantes que los indicados en #1, SÍ es posible.
A más: con doctype xhtml 1.0 strict, funcional en ff 3.6.8 y también ie7.

¿Es suficiente mi palabra o alguien más necesita del HIPNOSAPO ?«¡¡¡Gloria al Hipnosapo!!! @_@»

kseso? · #7 (**permalink**) 31/08/2010, 06:07

Pregunta y las respuestas son vinculantes:

¿Publico el código o hacemos un reto css de esto?

Si salen voluntarios que quieran entrarle nos buscamos la vida para intentar que haya premios a quienes logren ¿manipular el DOM con css? ¿Podríamos decirle así?

A lo dicho, a ver que opinan los usuarios de css.

TheDark03 · #8 (**permalink**) 31/08/2010, 09:28

Cita:

Iniciado por kseso?

¿Publico el código o hacemos un reto css de esto?

Si salen voluntarios que quieran entrarle nos buscamos la vida para intentar que haya premios a quienes logren ¿manipular el DOM con css? ¿Podríamos decirle así?

Hola Kseso? opino que seria mucho mejor que publiques el código ya que muchos usuarios al igual que yo tal vez desconocen o no saben implementar este ejemplo...

tu hablas de selectores hermanos adyacentes pero con esto realmente puedes cambiar la imagen o el background de un contenedor hermano del botón, por que eso si podría realizar??

y me disculpo por mi falta de conocimientos en este tema y por que lo di por imposible si es que se puede cambiar la imagen.

Saludos DTB

ArturoGallegos · #9 (**permalink**) 31/08/2010, 10:46

hermanos con la pista que nos dio el compañero kseso? es evidente que si es posible el rellover en un objeto externo al botón, sin embargo seria conveniente ver el código de valusk para saber si esto se podría aplicar.

jomaruro · #10 (**permalink**) 31/08/2010, 13:29

Hola:

Sr. Kseso? creo que los negadores de lo evidente no se animan con el reto. Y parece que tampoco a buscar en internet y reconocer su error.

Saludos.

kseso? · #11 (**permalink**) 31/08/2010, 14:58

Bueno, ¿nadie se atreve a intentar resolver el reto planteado por Valusk (pese a que haya desaparecido)?

Y si hubiese un premio, por ejemplo, hosting gratis, ¿alguien le entra?

Y ya adelanto que es posible por varias vías, con código xhtml 1.0 strict válido, funcional en ie7, Ópera, Safary, Chrome y Firefox en vi$ta.

TheDark03:
Nah. No se haga usted quebranto. Ya sabemos lo impulsiva que es la juventud y que hay ocasiones en que las ganas de ayudar relegan a la prudencia. jeje.
Y tampoco tome muy en serio mis palabras. Chocheos de mayores.

Jomaruro:
Es una buena ocasión para tus neuronas.

ArturoGallegos · #12 (**permalink**) 31/08/2010, 15:38

Cita:

Iniciado por kseso?

Bueno, ¿nadie se atreve a intentar resolver el reto planteado por Valusk (pese a que haya desaparecido)?

pues dudando un poco en que sea lo que vos tenias en mente y arriesgándome a arruinar una competencia , se me ocurrió algo asi:

Código CSS:

Ver original.boton1{
    display:block;
    height:25px;
    width:100px;
    background:#ccc;
    border:1px #333 solid;
    cursor:pointer;
    margin:15px;
    text-align:center;
    padding:5px;
    }
.imagen{
    background:url(http://cdn.iconfinder.net/data/icons/Siena/128/label_new%20red.png) no-repeat;
    display:block;
    width:128px;
    height:128px;
    margin:15px;
    }
.boton1:hover + .imagen{
    background:url(http://cdn.iconfinder.net/data/icons/holloweenavatars/PNG/Dracula.png) no-repeat;
}

Código HTML:

Ver original<div class="rellover">
 
 <span class="boton1">rellover</span>
 
 <span class="imagen"></span>
 
</div>

TheDark03 · #13 (**permalink**) 31/08/2010, 15:45

Hola kseso, no es que no sepa lo que tratas de decir y creo que agg666 ya me gano y también te arruine tu competencia ya habia creado un ejemplo muy parecido al de agg666

por eso te pregunte anteriormente

Cita:

Iniciado por TheDark03

tu hablas de selectores hermanos adyacentes pero con esto realmente puedes cambiar la imagen o el background de un contenedor hermano del botón, por que eso si podría realizar??
Saludos DTB

Saludos DTB.

PD: No me hago quebranto de nada ;).

kseso? · #14 (**permalink**) 31/08/2010, 16:07

TheDark03:
Se puede hacer atacando por el fondo del elemento, pero si ya fue capaz de actuar en un tercer elemento al hacer :hover sobre otro, nada te impide acceder a un hijo de ese tercer elemento, o su nieto, o... y a su contenido.

Ag666:
Lo simplificó al máximo. No he ejecutado ese código, pero por ahí van los tiros.

La gracia está en hacer el :hover a un input de tipo botón dentro de un form y que las imágenes contenidas en otro div cambién.

Como hay poca intención de resolver el reto, aquí una realización doble.
En una página actúo sobre el fondo de un div (llamado #cambio) al recibir el :hover el botón de "enviar" y en la otra página son dos imágenes alojadas vía src en ese div (#cambio).

Y ya puestos, pues ver primero con ie, después con ff y finalmente con ópera y webkit (safari y chrome).

Para hacerlo con un submit de un form sólo había que recordar que los formularios y sus fieldset son elementos de bloque, y que por lo tanto admiten en su interior div´s, p´s, etc.

Aquí cómo lo enfoqué. Adornado con una pizca de css3 (solo para los efectos visuales):
http://bit.ly/9XzpAI

furoya · #15 (**permalink**) 03/09/2010, 11:38

Estaba siguiendo este tema porque tenía curiosidad por saber a dónde iban. Ya que entré, aprovecho para coincidir en que los efectos de animación se deben hacer con lenguaje de programación (javascript, actionscript, ...), lo que no significa que sea imposible hacerlo con CSS. Y menos ahora, que nos acercamos cada vez más rápido al CSS-Script.

El truco, la ilusión de que una imagen cambia o aparece "lejos" de donde movemos el puntero, son muy viejos. La versión CSS circula en la web desde hace años y debería aparecer con cualquier buscador. Acá hay uno de los primeros que pusimos en estos foros.

Diferentes MouseOver's a una Imagen

Por lo visto, hoy existen muchos más recursos que en aquella época. Pero entiendo las reservas iniciales para poner un ejemplo actualizado : también debe haber montones similares a los que muestran, y si agregabamos uno más ¡por lo menos tratemos de que le sirva a valusk!
Para que se justifique, lo mismo creo que deberíamos saber donde lo va a usar, porque las limitaciones pueden ser enormes. Usando un escript, por supuesto que no.
El método CSS es puramente experimental, una curiosidad de las que posteamos aquí. Insisto en que yo tampoco recomiendo usarlo para esto. Lo que no pude es probar los que están ahora. No sé en qué navegadores trabajan, y como hay mucho IE6 todavía funcionando, tal vez nos convenga usar el método 'viejo' para que lo vean todos.

Lo que no debería generar reparos es que no se use un cambio de src, sino de fondo. Si estamos haciendo experimentos, vale todo.

Sprites css

Rollovers

¿Qué alt poner a una imagen puramente estética?

kseso? · #16 (**permalink**) 03/09/2010, 16:01

Se que antes o después me arrepentiré de darte réplica, Furoya :)) (es broma)

Mis respuestas lo han sido basadas en la consulta original planteada y en los términos originales formulados, que transcribo a continuación y resalto (que ya quedan muy arriba):

Cita:

Buenas tardes... quisiera que cuando paso el mouse por un boton una imagen fuera de él cambiara.. es decir.. no quiero que la imagen del boton cambie... sino una que este fuera de él.
No se si esto es posible hacerlo solo con css.. por eso mi duda.

Y como creo que ya manifesté, yo las entendí como: cambiar un elemento al recibir el foco (:hover) un tercero.
En este caso, que al hacer :hover sobre un botón (que yo asocié como un input tipo submit dentro de un formulario) se produjese un cambio de una imagen alojada fuera del botóm.

El usuario no limita qué especificaciones de css utilizar.
No obstante lo anterior, los selectores utilizados (de hermanos adyacentes: /+/) están recogidos en las especificaciones 2.1
Otra cosa es que algún navegador (ie6) no las soporte. Pero tampoco se limitó en ese aspecto la consulta.
Las pertenecientes a css3 (transform&transition) utilizadas son méramente ornamentales. Y no influyen en la sustitución ha realizar, sólo en cómo se realiza el proceso del cambio.
De hecho, el ejemplo es funcional en ie7, y el /scale(x)/ utilizado, podría ser reemplazado por un cambio de tamaño (width) para que este navegador también la mostrase ocupando toda la pantalla.

Reconozco que no he visto todos los ejemplos que enlaza, sólo los dos primeros. Y difieren de lo planteado en que en ellos el cambio de imagen se realiza en el mismo elemento que recibe el :hover. En nuestro caso sería el cambio de apariencia del propio botón, no del tercer elemento.

Sobre el dar o no soporte a ie6 y otros agentes de usuario no era el objeto de la consulta, ni del ejemplo propuesto por mi. Al menos yo no lo entendí así. Creo que eso es otro debate.

Y disiento totalmente de la afirmación "El método CSS es puramente experimental, una curiosidad de las que posteamos aquí."
No, CSS, incluidas muchas de las propiedades de las 3 es, a fecha de hoy, una realidad innegable utilizada ampliamente. Con independencia de que alguna propiedad o sus posibles valores estén más o menos soportados y cómo (prefijos privativos o declaración estándar).

Y ya termino. La afirmación tan categórica "los efectos de animación se deben hacer con lenguaje de programación (javascript, actionscript, ...)" la veo tan excesiva como querer limitar las posibilidades de cualquier otro lenguaje en base a que un tercero también lo hace. Entre casi todos los lenguajes/métodos/vías disponibles hay zonas coincidentes. Pero en esto pasaré de puntillas. Es materia que escapa a mis posibilidades y conocimientos. Sólo pondré un ejemplo relativo a css:
¿Renunciamos al uso de /:before/ y /:after/ porque eso mismo se puede conseguir vía algún js, o también se lo vetamos porque ahí tenemos php, o mejor le concedemos la exclusividad a...?

Eso sí, coincido, en su idea implícita, de que la elección de un método u otro dependerá de las particularidades concretas de cada caso, limitadas o primadas por los conocimientos o carencias de quien tenga que realizarlo.

Con mis disculpas por el rollo precedente. Entiéndase todo lo expuesto como un intercambio de opiniones, no una discusión o intento de negar, rebatir o dejar como erróneo lo manifestado por Furoya.

furoya · #17 (**permalink**) 06/09/2010, 07:44

No, si está muy bien. Hace muy poco me peleaba con alguien porque se creía que una idea podía exponerse 'en 140 caracteres'.
Hay que acostumbrarse a escribir, y sobre todo a leer.

Ah, sí, perdón, perdón; vamos a lo nuestro.

Tu respuesta estuvo perfecta. Eso de poner limitaciones 'por deporte' también lo hacemos muchos para aprender o practicar o activar una neurona nueva, que de otra forma seguiría dormida. Pero como sabemos que una página web es pura magia, que las capas no se superponen porque en verdad no hay una dimensión de fondo, o que un background no se transparenta con otro y que en realidad hay un 'promedio' de color en cada pixel; entonces en un diseño real, 'para usar' y no experimental, vale nada más que lo que vemos. Y el truco no se ve. Estoy seguro de que la pregunta inicial se refería exclusivamente al efecto, donde la imagen que cambia se "ve" fuera de la capa del botón. Aunque si nosotros abrimos el código fuente, capaz que los encontramos dentro de un mismo div.

Lo de que "el método CSS es experimental" lo dije por lo de hacer este efecto. Las animaciones se hacen con lenguaje de programación. Para eso está. Por supuesto que si un texto se mueve, el escript está modificando un valos CSS dinamicamente, pero el motor debe ser un escript. Por eso también (creo) hay un debate en algún lado sobre si apoyamos las animaciones CSS, o no. Porque en realidad, son escripts disfrazados de CSS. La desventaja es que no los vemos; le tiramos parámetros pero no podemos ajustar o modificar su funcionamiento. Y si estamos en contra de los efectos empaquetados o cutandpasteados, porque fomentan que cualquiera sin conocimientos los quiera usar, no les anden y después venga al Foro a preguntar "cómo lo arreglo", en vez de escribirlos y ya, entonces tampoco deberíamos fomentar (ni al creador ni al diseñador) que los use.
Pero estas eran muy buenas discusiones que se armaban en FdW hace tiempo. Ultimamente he leído cada 'argumento' sobre cosas tan obvias que preferí tomármelas a chiste, y por eso ya no participo (contigo estoy haciendo una excepción) [NOTA : también es broma

]

Si estamos jugando o recién aprendiendo, podemos usar el método que conocemos en ese momento, y si funciona ya está.
Si nos dedicamos a desarrollar páginas, tenemos que usar el que mejor se adapte. Y sí, para eso hay que saber. No queda otra.

Lo que yo no sabía es que el CSS3 ya dejó de ser borrador. Al menos eso entiendo. Al final lo voy a tener que leer. Si me tiran también el HTML5, me voy a un foro de jardinería.

Lo de los ejemplos ... en realidad creo que sólo vale el primero. Los otros son recomendaciones adicionales, para los que buscan más información. Y hay más enlaces adentro, así que tienen para un buen rato.

(Ah!. Y tampoco exageres.

)

kseso? · #18 (**permalink**) 10/09/2010, 07:56

Einsssss!! Era por este tema que tenía una sensación de "olvido". Mis disculpas por no haberte dicho algo antes, Furoya.

Tras tu aporte, gracias por la deferencia:), sólo un reconocimiento y una aclaración:

El reconocimiento:
Sí, existe ese debate de los límites de css. Si debe o no dar soporte a ciertas "vistosidades". Y lo cierto es que no tengo nada realmente meditado sobre el particular. Y de tenerlo, tampoco importaría a nadie, si he de ser sincero.
Una idea muy imprecisa que me ronda es que aquellos efectos que actúen sobre las propiedades definidas en css sí podrían tener cabida (cambio de opacidad o visibilidad para cierto "fade", o en las coordenadas de un elemento) pero muy limitados y básicos. No tanto como se pretenden con algunas propiedades privativas. Especialmente en webkit.

La aclaración:
Sobre tu frase "el método CSS es experimental", yo malinterpreté. Ahora me di cuenta que te referías a las propuestas de CSS3. Y tienes razón, a día de hoy siguen siendo propuestas no sancionadas (elevadas a versión "definitiva") por la w3c. Desde /opacity/ hasta las más recientes /transform-transition/ y demás. Aun están en "discusión".

Gracias por tu tiempo y palabras.

P.D.:

Cita:

Pero estas eran muy buenas discusiones que se armaban en FdW hace tiempo. Ultimamente he leído cada 'argumento' sobre cosas tan obvias que preferí tomármelas a chiste, y por eso ya no participo (contigo estoy haciendo una excepción) [NOTA : también es broma ]

Sí, es cierto. En ese aspecto ha habido una degradación más que notoria. Pero parece secundario y nimio a tenor de la falta de reacción o acciones para corregir la tendencia. A mayores, hay veces que parece que sea objetivo y que se promueva e incentive (por activa o por pasiva).

furoya · #19 (**permalink**) 14/09/2010, 07:45

No es mi caso. Me hice odioso por pegarle duro a los desubicados que preguntan o responden cualquier cosa. Aunque a nadie le importa la opinión de un viejo amargo.

No hay nada que agradecer (o sí, en tu caso estás prolongando un debate que en otras circunstancias me hubieran cortado sin compasión, así que aprovecho y te agradezco yo). Lo de la demora no es problema, por estos días estoy viniendo 2 ó 3 veces por mes, pero lo normal es que venga 2 ó 3 veces por año, así que te imaginarás que no me voy a quejar.

Lo que me molesta del "Dynamic CSS" es justamente que no cambia formatos sino que hace animaciones. Si el cambio es "paso a paso", se usa un escript. Estuve a punto de crear un ejemplo justamente con webkit para que el hover rotara una imagen sobre su eje "z" mientras hacía una transición de rollover : clara muestra de lo que debe hacerse con lenguaje de programación. Pero no vale la pena, porque ni siquiera sería compatible, en general está todo en CSS3. El hover fuera de los elementos activos, creo que no, que está en CSS2. Pero seguro ya lo mencioné en otro tema.

P.D. : ¿tú tampoco recibes MP? ¿O de verdad nadie me quiere?

chulifo · #20 (**permalink**) 14/09/2010, 08:53

Cita:

Iniciado por kseso?

Está fea la autocita, pero a usted, por incidir, se lo resalto en negrita, pues más feo es aseverar tan categóricamente algo que ya se ha indicado previamente como erróneo sin argumentar o aportar base para repetir la afirmación.

Y ahora ya le digo, que sin más condicionantes que los indicados en #1, SÍ es posible.
A más: con doctype xhtml 1.0 strict, funcional en ff 3.6.8 y también ie7.

¿Es suficiente mi palabra o alguien más necesita del HIPNOSAPO ?«¡¡¡Gloria al Hipnosapo!!! @_@»

no avia escuchado de este Hipnosapo
pero segun

Cita:

...se exilió a Venezuela donde planea derrocar a Hugo Chávez para ponerse él en el poder...

«¡¡¡Gloria al Hipnosapo!!! @_@»

kseso? · #21 (**permalink**) 14/09/2010, 12:31

Cita:

Iniciado por furoya

P.D. : ¿tú tampoco recibes MP? ¿O de verdad nadie me quiere?

Gracias por el dato (sobre la recepción de MP). Desconocía ese extremo, pues yo no lo he configurado así, al menos conscientemente.
Da la casualidad que un desconocido, solo o con la anuencia de terceros, con los permisos necesarios en el foro y sin dignarse mencionarme nada al respecto, alteró algún elemento de mi perfil. No se si también se tomó esa libertad, accidentalmente o con pleno conocimiento. También desconozco si los elementos estrictamente privados seguirán siéndolos.
No obstante, consciente de ello, vuelvo a abrir el buzón.

Sobre sus itálicas: nunca contesto a eso en la primera cita xDD :P :))

furoya · #22 (**permalink**) 28/09/2010, 09:55

Ahora pude mandarte un MP.
Creo que esto ya lo conté : una vez me sacaron la contraseña de una cuenta de correo y me suscribieron a cuanto sitio chanchito encontraron, además de enviar mensajes con mi remitente a personas que ni conocía. Fue una manera de avisarme que no dejara más la sesión abierta en una máquina pública, pero en realidad no fue mi culpa, aquel administrador la cerró antes de que llegara a desloguearme, y después no la reinició antes de dársela a otro, para borrar mis cookies.

Bien, terminemos de divagar. Al final no me aguanté (otra vez) y empecé a trabajar en el rollover. Pero lo del giro era demasiado circesne, así que hice ese que mencionaste de la transición cambiando opacity.

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

	/* contiene botón, divs e imágenes */
#caja1 {position: relative; width: 0; 
height:0; text-align: center; margin-bottom: 22em; 
}

	/* recibe hover y contiene imagen delantera */
#caja2 {width: 0; height: 0; position: absolute; 
top:0; left: 0; margin:0; 
}

	/* aplica opacidad a la imagen delantera 
	y cambia a través del hover */
#caja2 .imag2 {opacity: 1; filter: 
progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
}
#caja2:hover .imag2 {opacity: 0; filter: 
progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
}

	/* imágenes colocadas una delante de la otra 
	y desplazadas fuera de la caja */
.imag1, .imag2 {position: absolute; top:0; left: 10em; 
width: 30em;
}

	/*cambio paso a paso de imag2 */
.imag2 {
-webkit-transition: opacity 1.5s linear; 
-moz-transition: opacity 1.5s linear; 
-o-transition: opacity 1.5s linear; 
}

	/* evita que en hover se active también 
	sobre la imagen */
#tapa1 {position: absolute; top:0; left: 10em; 
width: 30em; height: 20em;
border: 1px solid white; 
background-image: url(0.0);  /* para IE8, Op */
}

	/* no está cubierto por tapa1 y se ve como 
	el elemento para activar con el hover */
#boton {border-width:0.4em; font-size: 1em; 
font-weight: bold; 
}

</style>
</head>
<body>
<h2>Bot&oacute;n que cambia imagen con <tt>hover</tt>. 
(Transici&oacute;n para Safari / Chrome, Opera).</h2>


<div id="caja1">
  <img class="imag1" src="http://img160.imageshack.us/img160/5271/frenteranadh6.jpg">
  <div id="caja2">
    <input type="button" onclick="alert('Nada.')" 
    value="BOT&Oacute;N" id="boton">
    <img class="imag2" src="http://img259.imageshack.us/img259/6365/fondoranab3xi.jpg">
  </div>
  <div id="tapa1"> </div>
</div>
<hr />
<p>Fin.</p>
</body>
</html>

El 'reemplazo' es en realidad un "transparentado" de imagen, para que permita ver la que hay detrás. No es el mejor método, pero me permite hacer ese efecto de transición en los navegadores que lo soportan.

IExplorer es un problema, porque la opacidad la cambia con un filtro. En realidad, ahí debí usar un revealtrans, pero no sé cómo dispararlo con hover.
O sí, puedo usar expression() metiendo adentro una segunda función. Pero entonces estaría usando javascript, y para eso pongo todo en un escript y me ahorro cualquier problema.

Recién se me ocurrió que podría agregar el ejemplo de 'insertar' la imagen con CSS, pero no sé si se pueden combinar font=monospace]:hover[/font] con :after. Por tus comentarios supongo que sí. Cuando tenga algo de tiempo lo pruebo (si nadie se anima a hacerlo primero).

Efecto 'enfoque' con cambio de opacidad

furoya · #23 (**permalink**) 19/10/2010, 10:36

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]

kseso? · #24 (**permalink**) 20/10/2010, 06:46

Siento que la respuesta sea tan concisa, y por lo tanto ya nace viciada. Cuestión de tiempo disponible. Mis disculpas por ello.

En tu ejemplo, Furoya, actúas sobre el mismo elemento (el propio enlace), no sobre un tercero, que fue la premisa en la que siempre basé mi planteamiento.
Y al utilizar /:before/ nos aseguramos que las versiones anteriores a ie7 (incluido) no lo muestren.

Los enlaces, al menos en las últimas versiones de los distintos html o xhtml son considerados elementos inline, por lo tanto, no admiten algunas propiedades sin alterar esa naturaleza.

Cita:

...por lo tanto el hover también funciona sobre ella...

Claro, porque el :after/:before es una parte más del elemento sobre el que se declara.

Para poder manipular mejor el :after declárale /display: block/ (y si fuese necesario /position: absolute/) y podrás aplicarle márgenes, desplazamientos... aquello que necesites.

Y sobre el hosting gratis,lo siento, fue sólo un caramelo que ofrecí para incitar a participar en el tema. Que de haber sido aceptado el "reto" debería haber contado con terceros para haber desarrollado plenamente lo que llevaba en mente.