Foros del Web » Creando para Internet » CSS »

Imagen de sustitución.

Estas en el tema de Imagen de sustitución. en el foro de CSS en Foros del Web. Hola a todos. Me gustaría saber cómo se puede hacer que una imagen se sustituya por una tabla con datos. Acá les dejo un ejemplo ...
  #1 (permalink)  
Antiguo 04/09/2010, 22:08
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Imagen de sustitución.

Hola a todos.

Me gustaría saber cómo se puede hacer que una imagen se sustituya por una tabla con datos.

Acá les dejo un ejemplo de lo que quiero http://www.thecssawards.com/. Como pueden ver las thumbnail o miniaturas al pasar el mouse sobre ellas se remplazan por los datos de la misma.

Saludos!!
__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 05/09/2010, 02:20
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Imagen de sustitución.

Aclaración: eso es una lista, no una tabla.

Es muy fácil:

Dentro de cada item de la lista hay dos elementos:
  1. Una imagen (position:absolute;display:block;)
  2. Un div (position:absolute;display:none;)

Con JQuery (JavaScript) se le adjunta, a todos los items de la lista, un listener para los eventos mouseout y mouseover que conmuta la visibilidad de la imagen y el div con efecto de fade.

Con transiciones de CSS3 se puede lograr un efecto similar, pero por compatibilidad es mejor que lo hagas así como en ese sitio.
  #3 (permalink)  
Antiguo 06/09/2010, 15:09
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Imagen de sustitución.

Muchas gracias por tu respuestas bng5

La verdad logre entenderlo a medias si podrias poner un ejemplo seria genial.

Muchas gracias!!
__________________
Fondos de pantalla
Juegos Gratis
  #4 (permalink)  
Antiguo 06/09/2010, 15:37
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Imagen de sustitución.

también puedes usar la pseudoclase hover en la etiqueta a y sustituir la imagen
Código CSS:
Ver original
  1. a:hover {
  2. background:...
  3. }
  #5 (permalink)  
Antiguo 06/09/2010, 15:37
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Imagen de sustitución.

Si pongo ejemplo: lo termino haciendo por completo.

Está todo ahí, CSS, JavaScript y HTML.

Para hacerlo de forma más racional, podés ir leyendo sobre JQuery.
  #6 (permalink)  
Antiguo 06/09/2010, 15:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen de sustitución.

Supongo que el uso del jQuery no será sólo para ese efecto de sustitución visual de un elemento por otro al /:hover/ y para el desvanecimiento de la transición. Sería como matar moscas a cañonazos.

Ya que la consulta se hace en un foro de css, ya le digo que eso mismo (y con matizaciones también la transición) sería más eficiente lograrlo sólo con css.
A priori, sin intento de lograrlo, no necesitaría más que añadir al selector de esa página
Cita:
.list1 li a:hover img {visibility: hidden;}
Bueno, al final, aquí tiene el código. Respetando el marcado html y el css, con esa línea añadida.
NOTA: sólo a efectos lectivos y como explicación se hace uso del html y css de esa página: All rights reserved © 2009 The Css Website Awards :: CSS Gallery of the most prestigious websites.

Copie, pegue, ejecute en el navegador. Pero lo más importante, estudie el código y vea qué hace qué. Y no olvide el copyright
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5. <style type="text/css">
  6.  * {
  7.     margin: 0;
  8.     padding: 0;
  9.     border: 0;
  10.     outline: 0;
  11.   }
  12. html, body {
  13.   font-weight:normal;
  14.     font-size: 100%;
  15.     height:100%;
  16.     width:100%;
  17.   }
  18. ul {
  19. list-style-type:none;
  20. }
  21. .list1 li.dia {
  22. background:none repeat scroll 0 0 #96BC43;
  23. color:#333333;
  24. }
  25. .list1 li {
  26. float:left;
  27. height:101px;
  28. margin:0 6px 6px 0;
  29. padding:0;
  30. position:relative;
  31. width:171px;
  32. }
  33. .list1 li a {
  34. height:101px;
  35. left:0;
  36. margin:0;
  37. padding:0;
  38. position:absolute;
  39. top:0;
  40. width:171px;
  41. z-index:3;
  42. }
  43. .list1 li.dia a img {
  44. left:0;
  45. margin:0;
  46. padding:0;
  47. position:absolute;
  48. top:0;
  49. z-index:3;
  50. }
  51. a {
  52. color:#9BB725;
  53. text-decoration:none;
  54. }
  55. .list1 li a:hover img {visibility: hidden;}
  56. .list1 li div.txt {
  57. height:101px;
  58. width:171px;
  59. z-index:1;
  60. }
  61. .list1 li div.txt {
  62. height:101px;
  63. width:171px;
  64. z-index:1;
  65. }
  66. .list1 li div.txt span.dia {
  67. font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  68. font-size:33px;
  69. left:19px;
  70. position:absolute;
  71. text-align:right;
  72. top:12px;
  73. width:34px;
  74. }
  75. .list1 li div.txt span.mes {
  76. font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  77. font-size:13px;
  78. font-weight:bold;
  79. left:55px;
  80. position:absolute;
  81. text-transform:uppercase;
  82. top:17px;
  83. }
  84. .list1 li div.txt span.ano {
  85. font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  86. font-size:11px;
  87. font-weight:bold;
  88. left:55px;
  89. position:absolute;
  90. top:31px;
  91. }
  92. .list1 li div.txt span.tit {
  93. color: #fff;
  94. font-family:Arial,Helvetica,sans-serif;
  95. font-size:13px;
  96. font-weight:700;
  97. left:19px;
  98. position:absolute;
  99. top:46px;
  100. }
  101. .list1 li div.txt span.nota {
  102. font-size:33px;
  103. left:15px;
  104. position:absolute;
  105. text-align:right;
  106. top:60px;
  107. width:22px;
  108. }
  109. .list1 li div.txt span.dec {
  110. font-size:13px;
  111. font-weight:bold;
  112. left:40px;
  113. position:absolute;
  114. top:63px;
  115. }
  116.  
  117. </head>
  118. <ul class="list1">
  119.  
  120. <li class="dia">
  121. <a href="http://www.thecssawards.com/no-favorite.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1283242122.jpg" /></a>
  122. <div class="txt">
  123. <span class="dia">06</span>
  124. <span class="mes">Sep</span>
  125. <span class="ano">2010</span>
  126. <span class="tit">WEBSITE OF THE DAY</span>
  127. <span class="nota">7</span>
  128. <span class="dec">23</span>
  129. </div>
  130. </li>
  131. <li class="dia">
  132. <a href="http://www.thecssawards.com/made-by-tj.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1282596076.png" /></a>
  133. <div class="txt">
  134. <span class="dia">05</span>
  135. <span class="mes">Sep</span>
  136. <span class="ano">2010</span>
  137. <span class="tit">WEBSITE OF THE DAY</span>
  138. <span class="nota">6</span>
  139. <span class="dec">66</span>
  140. </div>
  141. </li>
  142. <li class="dia">
  143. <a href="http://www.thecssawards.com/johnnybroccolii.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1282549227.png" /></a>
  144. <div class="txt">
  145. <span class="dia">04</span>
  146. <span class="mes">Sep</span>
  147. <span class="ano">2010</span>
  148. <span class="tit">WEBSITE OF THE DAY</span>
  149. <span class="nota">6</span>
  150. <span class="dec">95</span>
  151. </div>
  152. </li>
  153. <li class="dia">
  154. <a href="http://www.thecssawards.com/ines-papert.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1283168669.jpg" /></a>
  155. <div class="txt">
  156. <span class="dia">03</span>
  157. <span class="mes">Sep</span>
  158. <span class="ano">2010</span>
  159. <span class="tit">WEBSITE OF THE DAY</span>
  160. <span class="nota">7</span>
  161. <span class="dec">03</span>
  162. </div>
  163. </li>
  164. </ul>
  165. </body>
  166. </html>

Última edición por kseso?; 06/09/2010 a las 16:02
  #7 (permalink)  
Antiguo 06/09/2010, 16:14
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Imagen de sustitución.

kseso?: Yo me referí a JQuery inicialmente, porque estaba resumiendo como lo hicieron en el sitio que pasó alvaro0022 como ejemplo. Seguramente le estan sacando probecho con más prestaciones de JQuery.

Está clarísimo que sería más eficiente hacerlo todo con CSS, pero sin contar las últimas versiones de los principales navegadores ¿cuántos soportarían transiciones?

Otra cosa a tener en cuenta es "¿Qué tan importante sería la transición?".
Estoy a favor de los conceptos Graceful Degradation y Progressive Enhancement. Me gusta la idea de que se haga en CSS, el navegador que lo soporta lo muestra con transición, el que no: no.
  #8 (permalink)  
Antiguo 06/09/2010, 16:37
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Imagen de sustitución.

kseso?: La verdad te quedó precioso. No usaste las transiciones de CSS3, pero hace lo que tiene que hacer.

Lo que hiciste lo podría haber hecho yo, o incluso alvaro0022. Ahora ¿valía la pena hacerlo teniendo en cuenta que ni siquiera la persona que lo necesitaba revisó el código?
  #9 (permalink)  
Antiguo 06/09/2010, 16:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen de sustitución.

bng5:
En ese ejemplo no hay nada de css3, ergo, tampoco transiciones de css3.
Sólo hay un cambio en la propiedad /visibility/ de la imagen. Pasa de /visible/ a /hidden/ al recibir el foco del puntero /:hover/.

Y mi respuesta fue tanto para el usuario que planteó la duda inicialmente como para quienes indicasteis la vía del js. Como complemento, o mejor dicho, como ampliación de ellas.

Y sí, es cierto que "Lo que hiciste lo podría haber hecho yo, o incluso alvaro0022" (sic). La cuestión es que no sólo no estaba hecho sino que tampoco se contemplaba la vía de "sólo css".
  #10 (permalink)  
Antiguo 06/09/2010, 22:56
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Imagen de sustitución.

Antes que nada quería agradecerles por sus aportes y disculparme por no aparecer por el foro.

El código que pasó kseso funciona perfecto y es justo lo que quiero.

El único problema es que en internet explorer al pasar el ratón sobre el texto vuelve a la imagen y luego al fondo es como si temblara. En los demás navegadores funciona perfecto.

Muchísimas gracias.

Veré como puedo solucionar eso. Si alguien lo sabe por favor cuente.

Gracias nuevamente y me disculpo por no participar en la discusión.
__________________
Fondos de pantalla
Juegos Gratis
  #11 (permalink)  
Antiguo 07/09/2010, 14:56
Avatar de bng5  
Fecha de Ingreso: junio-2009
Ubicación: 127.0.0.1
Mensajes: 269
Antigüedad: 8 años, 6 meses
Puntos: 24
Respuesta: Imagen de sustitución.

No tengo Explorer, pero imagino que es lo que pasa.
Al posar el puntero sobre la imgen: la imagen desaparece, por lo que para IE el puntero ya no está sobre el elemento, por lo que aparece nuevamente y así sucesivamente.

Te recomiendo que empieces a matar moscas a cañonazos, ¿o alguien duda que una mosca muera de un cañonazo?
Con el "cañon" (JQuery) ya te aseguras un soporte más amplio para los navegadores, incluso navegadores obsoletos como IE6.

Última edición por bng5; 07/09/2010 a las 15:01
  #12 (permalink)  
Antiguo 07/09/2010, 16:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen de sustitución.

Pues no. No es precisamente eso lo que sucede. Entre otras razones, porque el enlace no "desaparece". Lo que aplica es un /visibility: hidden/ de la imagen que hay dentro del enlace. No es una ocultación del enlace por /display: none/ al propio enlace.

En un análisis rápido, por alguna razón ie7 (no se si es a esa la versión a la que se refiere) no respeta el /z-index:1/ de div.text y sus contenidos sólo cuando el cursor pasa por encima de los caracteres.

Pero la finalidad del ejemplo era mostrar la vía para hacerlo con css, no el hacer el trabajo. De ahí el utilizar los códigos (bajo ©) sin mayor análisis ni depuración.
  #13 (permalink)  
Antiguo 20/03/2011, 00:10
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 194
Antigüedad: 8 años, 2 meses
Puntos: 7
Respuesta: Imagen de sustitución.

Cita:
Iniciado por alvaro0022 Ver Mensaje
Hola a todos.

Me gustaría saber cómo se puede hacer que una imagen se sustituya por una tabla con datos.

Acá les dejo un ejemplo de lo que quiero http://www.thecssawards.com/. Como pueden ver las thumbnail o miniaturas al pasar el mouse sobre ellas se remplazan por los datos de la misma.

Saludos!!
Se que ha pasado mucho tiempo de esto.

Lo que quiero saber es lo mismo pero ahora en el sitio http://www.thecssawards.com/ se puede ver que al pasar el raton sobre las miniaturas aparecen los datos pero sobre un fondo transparente dejando ver aun la miniatura.

Como se puede hacer esto?

saludos!!
__________________
Fondos de pantalla
Juegos Gratis

Etiquetas: miniaturas, sustitución, thumbnails
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 10:48.