Foros del Web » Creando para Internet » CSS »

Rollover de Imágenes sin Ningún Texto

Estas en el tema de Rollover de Imágenes sin Ningún Texto en el foro de CSS en Foros del Web. Hola: ¿Es posible crear un rollover de imágenes que cambian de una a otra en hover sin existencia de ningún texto explicativo del enlace? Es ...
  #1 (permalink)  
Antiguo 21/08/2006, 09:59
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Rollover de Imágenes sin Ningún Texto

Hola:

¿Es posible crear un rollover de imágenes que cambian de una a otra en hover sin existencia de ningún texto explicativo del enlace?

Es decir, como las imágenes de sustitución creadas, por ejemplo, por Dreamweaver mediante la introducción de una serie de comandos de Js.

Ello, pero utilizando sólo css.

Me parece que me veo introduciendo Js en el código, lo cual no me gusta, ya que, como sabéis, alrededor de un 10% de los ordenadores lo tienen desconectado por motivos de seguridad. Aparte de que rompe la integridad que quiero lograr usando sólo CSS.

¿Es posible o no?

En este caso, me podríais indicar algún ejemplo web en que se haga.

Gracias.
  #2 (permalink)  
Antiguo 21/08/2006, 10:21
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
sí es perfectamente posible utilizando la pseudo-clase "hover". por ejemplo:

Código:
 
.CuadoImagen{
   display: block;
   width: 320px; /*anchura de la imagen*/
   height: 200px; /*altura de la imagen*/
   background: url(imagen1);
}

.CuadroImagen:hover{
  background: url(imagen2);
}
Sin embargo ten en cuenta que IE sólo hace caso de las pseudo-clases en los enlaces, por lo que deberías utilizar código html tal que así:

Código:
  <a href="#" class="CuadroImagen"></a>
  #3 (permalink)  
Antiguo 21/08/2006, 23:29
Avatar de lasagna  
Fecha de Ingreso: agosto-2006
Ubicación: Santiago de Chile
Mensajes: 33
Antigüedad: 11 años, 3 meses
Puntos: 0
yo trate de hacer lo que sugeriste nigel, pero en mi codigo no resulto... :S

<a href="/index.htm"><img src="/ico5.gif" width="60" height="55" border="0" class="ico"></a>.

.ico {background-image: url(/ico5.gif);
}

.ico:hover{background-image: url(/ico6.gif);
}

no paso nada, la imagen no cambio...plop!

A ver si me puedes decir que estoy haciendo mal, por favor.

MUXAS GRAX
  #4 (permalink)  
Antiguo 21/08/2006, 23:43
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
lo que pasa es que estas

Cita:
<a href="/index.htm"><img src="/ico5.gif" width="60" height="55" border="0" class="ico"></a>.
le estas haciendo un link y a dentro un objeto imagen..

y con estas funciones le estas cambiado el background a el link mas no al objeto imagen..
Cita:
.ico {background-image: url(/ico5.gif);
}

.ico:hover{background-image: url(/ico6.gif);
}
prueba con este..
Cita:
.ico {background-image: url(/ico5.gif);
display:block;
width:60px;
height:55px;
}

.ico:hover{background-image: url(/ico6.gif);



<a href="/index.htm"></a>
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 22/08/2006, 05:37
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Fallo

Queridos amigos:

Intento aplicar las soluciones que me proponéis de la siguiente manera en css:

.tarjetaa {
background-image: url(/tarjetaa.gif);
display:block;
width:50px;
height:50px;
}
.tarjetaa {
hover: background-image: url(/tarjetab.gif);

Donde tarjetaa y tarjetab son las imágenes a intercambiar.

Lo que no entiendo es cómo ha de articularse luego el enlace.

Decís que <a href="#" class="CuadroImagen"></a>

En este caso: <a href="." id="tarjetaa"></a>

No obstante, no veo dónde ni cómo debe ir el enlace hacia, por ejemplo home.html


Espero vuestra aclaración.

Gracias.
  #6 (permalink)  
Antiguo 22/08/2006, 06:26
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola JUMASOL

El enlace se pone como cualquier otro enlace HTML:

En este caso: <a href="home.html" id="tarjetaa">Enlace</a>

Saludos,
  #7 (permalink)  
Antiguo 22/08/2006, 08:11
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Hola de nuevo:

Creo que he incurrido en algún genero de confusión a la hora de describir y entender el problema, así que voy a describir el código a continuación. Después, se trataría de colocar una imagen llamada tarjetaa en lugar de Lorem ipsum . Se trataría de que una imagen hiciese de botón, sustituyéndose por otra llamada tarjetab en pasar el ratón por encima.

Pero, insisto, sin letra en el enlace.


El HTML sería:

(……)

<DIV id=navbar>
<UL>
<LI><A href="home.html/">Lorem ipsum</A>

(……)


El CCS sería:

(……)

A:link {
COLOR: #666666; BACKGROUND-COLOR: #95b7cd; TEXT-DECORATION: none
}
A:visited {
COLOR: #666666; BACKGROUND-COLOR: #95b7cd; TEXT-DECORATION: line-through
}
A:hover {
BACKGROUND-COLOR: #aaddee
}
A:active {
BACKGROUND-COLOR: #3cc7f0
}

(…)

#navbar {
FONT-WEIGHT: bold; LEFT: 0px; WIDTH: 198px; POSITION: absolute; TOP: 0px
}
#navbar UL LI A:link {
DISPLAY: block; PADDING-LEFT: 20px; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
}
#navbar UL LI A:visited {
DISPLAY: block; PADDING-LEFT: 20px; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px solid; TEXT-DECORATION: none
}
#navbar UL LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

Me gustaría, pues, que alguna persona más capacitada pudiera operar directamente en este ejemplo de código para lograr el deseado efecto, sustituyendo todos los datos presentes y que corresponderían a lorem ipsum (que tiene que desaparecer)

Por otro lado, espero disculpéis mi de seguro molesta torpeza en este tema.

Gracias.
  #8 (permalink)  
Antiguo 22/08/2006, 12:46
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
Creo que estás confundiendo clases con identificadores en CSS. Lo que intenstas hacer, es lo que te expliqué, y es tan simple como esto

Espero que te sirva el ejemplo práctico
  #9 (permalink)  
Antiguo 24/08/2006, 09:48
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
...

Gracias Nigel:

Tu ejemplo es exactamente lo que estaba buscando, sin más.

Por otro lado, leyendo aquí y allá sobre este y otros problemas relativos, me encuentro con que podría haber un problema en sistemas con las imágenes desabilitadas. Al no a parecer la imagen y no haber enlace de texto, la navegación de una web que utilizase este sistema quedaría totalmente desabilitada e inoperante.

He encontrado un sistema en un sitio dedicado a estas disertaciones, en que se ofrece un procedimiento de combinación de texto e imágen, que muestra la imagen cubriendo el texto. De tal forma que, en caso de no aparecer la imágen, se muestra el hipervínculo.

Creo que podría ser el mejor sistema para estos supuestos, además de ser más interesante desde el punto de vista SEO, ya que añade un enlace de texto, que, parece ser, tiene más relevancia para los buscadores que el enlace a través de imágen (ALT, etc.).

No obstante, puede que no ofrezca tan buenas perspectivas de solución. Yo no lo sé y me gustaría que tú mismo o alguien con tu experiencia opinase sobre este llamado Cover-Up Method.

La página está en http://wellstyled.com/css-replace-text-by-image.html

Gracias una vez más.
  #10 (permalink)  
Antiguo 24/08/2006, 18:16
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
No es necesario cubrir la imagen, sólo basta con "ocultar" el texto mediante paddings. Te cuento, la idea es que en vez de establecer la altura de la imagen con el atributo "height", lo hagas con el "padding-top" por ejemplo. De esta forma, el texto existe, pero no se ver ya que se sale de las dimensiones del elemento (siempre que pongas el overflow a hidden)

aqui tienes el ejemplo: http://mods.solzimer.es/david/exampl...eraimagen.html
Luego es bastante fácil de combinar con lo anterior. Prueba a visualiszarlo normal, y luego desactiva las hojas de estilo, y verás que la imagen queda sustituida por un texto que es real (no un atributo "alt"). El único problema es que no funciona bien con IE 5 (el texto aparece quieras o no)

La solución que has puesto tú también es perfectamente válida, aunque añade una etiqueta innecesaria. Pero eso ya es cuestion de gustos, y sirven perfectamente las dos
  #11 (permalink)  
Antiguo 25/08/2006, 05:14
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
...

Para mí la principal problemática, aunque no haya dicho nada hasta ahora, no es encontrar los diseños y las formas, sino obtener un resultado válido en la mayor cantidad posible de navegadores, incluyendo, por supuesto, IE.

Sin no fuese por esta problemática, todos estos temas serían baladí. Con echarle mano a Dreamweaver y crear enlaces con imágenes de sustitución ya basta.

Incluso, sin me apuras, hacer botones con estados en Flash.

No obstante, si queremos hacer un trabajo fino en xhtml y css, acorde con todos los estándares web y perfectamente optimizado para buscadores, tenemos que recurrir a cosas más complejas que, después, presentan estas dificultades.

Por tanto, prefiero la solución de la ocultación, por contraposición a la tuya, que es muy viable, por supuesto, pero que me quita uno de los objetivos que más ansío y arriba expuesto.

En cualquier caso, me gustaría que me dijeses si sabes qué resultado ofrecería el sistema de ocultación en IE.

Gracias.
  #12 (permalink)  
Antiguo 25/08/2006, 19:08
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
Por lo que he visto es 100% estandar con XHTML y CSS, y al margen de Doctypes, funciona en cualquier navegador de los conocidos (a.k.a. todos los estandares e IE 5 y 6). Mi solución también, salvo que no funciona en IE 5, pero está claro que puedes usar la que prefieras, que para eso ambas son válidas dentro de los parámetros de estandarización y accesibilidad.

Aunque los tiros van realmente por otro lado, una vez sabemos que ambas soluciones cumplen con los estándares (aunque al pasárselos por el forro IE 5, la mía no funcione en éste), lo que hay que preocuparse es por el del XHTML semántico. Es decir, ¿aporta algo o es necesaria la etiqueta SPAN?
Tienes la desventaja por una parte, de que es una etiqueta extra (aunque bueno, también lo son los miles de DIV's que se pueden llegar a usar con CSS), y la ventaja de que, al igual que los DIVs, no tiene ningún significado semántico, por lo que los agentes de usuario no lo interpretan como algo que no debiera ser (es decir, para Google, por ejemplo, no deja de ser un título, un SPAN o un DIV no significan nada, son etiquetas vacías de semántica, más allá de la acción de "separar" contenido de cara a la presentación)

Puede parecer una discusión un poco pija o tonta, pero la idea realmente es el tratar de no caer en la "divitis", o en este caso "spanitis" xDDD Siempre que se pueda evitar poner un DIV o un SPAN extras, mejor que mejor (es una postura muy purista, pero ya que hablamos de hacer un trabajo fino, siempre hay que pensar en estas cosas ) Eso no quita que a veces coloquemos algún que otro DIV de más que nos dé mayor libertad con el diseño, pero siempre es preferible evitarlo. En este caso no veo que sea un problema usar el SPAN porque es una solución a un problema muy particular, pero no debiera ser la norma.

Si buscas un código XHTML limpio y estandar, usa mi solución; Si buscas un código no tan limpio, pero igualmente estandar y compatible además con IE5, está claro, usa la tuya
  #13 (permalink)  
Antiguo 29/08/2006, 05:12
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Nueva confusión

Hola:

En las últimas contestaciones, se hacía referencia al posible uso de imágenes que tapan texto como en http://wellstyled.com/files/css-repl...example02.html

Es el sistema que busco para hacer rollovers sólo de imágen, pero que, en caso de fallar las imágenes, dejen ver el texto.

El problema no es sólo utilizar rollover sólo con imágenes en css, sino conseguir que, en caso de que las imágenes no se muestren, se muestre el enlace de texto, que estaría tapado por dichas imágenes.

No obstante, no me había fijado que el ejemplo dado por wellstyled se trata sólo de un texto tapado por una imagen, y no de un enlace de texto tapado por una imagen. Porque en el otro ejemplo que presenta wellstyled.com para lograr tal efecto en el caso de enlaces en http://wellstyled.com/files/css-repl...example03.html (enlace tapado y que sólo se vea imágenes rollover) el efecto no es el mismo, ya que utiliza la siguiente opción:

#chapter-one a span { display:none }

En lugar de

#chapter-one span {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:200px; height:80px;
margin:0; padding:0;
background:url("chapter-one.gif") top left no-repeat;
}
utilizado en el caso del simple texto tapado por imagen.

Lo cierto es que asegura que se consigue lo mismo, aunque no es cierto, ya que el display:none hace que, si las imágenes no se ven, el enlace de texto tampoco. No consigue pues el efecto de tapar enlace y mostrarlo si no se ven las imágenes.

Se trataría de combinar ambos efectos, un rollover de imágenes que, a su vez, cubriese el enlace de texto.

¿Es posible tal cosa?

Gracias.



En lugar de

Última edición por JUMASOL; 29/08/2006 a las 08:54
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:18.