Imagen de sustitución.

alvaro0022 · #1 (**permalink**) 04/09/2010, 21:08

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

bng5 · #2 (**permalink**) 05/09/2010, 01:20

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

Es muy fácil:

Dentro de cada item de la lista hay dos elementos:

Una imagen (position:absolute;display:block;)
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.

alvaro0022 · #3 (**permalink**) 06/09/2010, 14:09

Muchas gracias por tu respuestas bng5

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

Muchas gracias!!

tempto · #4 (**permalink**) 06/09/2010, 14:37

también puedes usar la pseudoclase hover en la etiqueta a y sustituir la imagen

Código CSS:

Ver originala:hover {
background:...
}

bng5 · #5 (**permalink**) 06/09/2010, 14:37

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.

kseso? · #6 (**permalink**) 06/09/2010, 14:54

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
<style type="text/css">
 * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
  }
html, body {
  font-weight:normal;
    font-size: 100%;
    height:100%;
    width:100%;
  }
ul {
list-style-type:none;
}
.list1 li.dia {
background:none repeat scroll 0 0 #96BC43;
color:#333333;
}
.list1 li {
float:left;
height:101px;
margin:0 6px 6px 0;
padding:0;
position:relative;
width:171px;
}
.list1 li a {
height:101px;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:171px;
z-index:3;
}
.list1 li.dia a img {
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
z-index:3;
}
a {
color:#9BB725;
text-decoration:none;
}
.list1 li a:hover img {visibility: hidden;}
.list1 li div.txt {
height:101px;
width:171px;
z-index:1;
}
.list1 li div.txt {
height:101px;
width:171px;
z-index:1;
}
.list1 li div.txt span.dia {
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:33px;
left:19px;
position:absolute;
text-align:right;
top:12px;
width:34px;
}
.list1 li div.txt span.mes {
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:13px;
font-weight:bold;
left:55px;
position:absolute;
text-transform:uppercase;
top:17px;
}
.list1 li div.txt span.ano {
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
left:55px;
position:absolute;
top:31px;
}
.list1 li div.txt span.tit {
color: #fff;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-weight:700;
left:19px;
position:absolute;
top:46px;
}
.list1 li div.txt span.nota {
font-size:33px;
left:15px;
position:absolute;
text-align:right;
top:60px;
width:22px;
}
.list1 li div.txt span.dec {
font-size:13px;
font-weight:bold;
left:40px;
position:absolute;
top:63px;
}
</style>
 
</head>
<body>
<ul class="list1">
 
<li class="dia">
<a href="http://www.thecssawards.com/no-favorite.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1283242122.jpg" /></a>
<div class="txt">
<span class="dia">06</span>
<span class="mes">Sep</span>
<span class="ano">2010</span>
<span class="tit">WEBSITE OF THE DAY</span>
<span class="nota">7</span>
<span class="dec">23</span>
</div>
</li>
<li class="dia">
<a href="http://www.thecssawards.com/made-by-tj.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1282596076.png" /></a>
<div class="txt">
<span class="dia">05</span>
<span class="mes">Sep</span>
<span class="ano">2010</span>
<span class="tit">WEBSITE OF THE DAY</span>
<span class="nota">6</span>
<span class="dec">66</span>
</div>
</li>
<li class="dia">
<a href="http://www.thecssawards.com/johnnybroccolii.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1282549227.png" /></a>
<div class="txt">
<span class="dia">04</span>
<span class="mes">Sep</span>
<span class="ano">2010</span>
<span class="tit">WEBSITE OF THE DAY</span>
<span class="nota">6</span>
<span class="dec">95</span>
</div>
</li>
<li class="dia">
<a href="http://www.thecssawards.com/ines-papert.html"><img alt="css web" src="http://www.thecssawards.com/webimages/1283168669.jpg" /></a>
<div class="txt">
<span class="dia">03</span>
<span class="mes">Sep</span>
<span class="ano">2010</span>
<span class="tit">WEBSITE OF THE DAY</span>
<span class="nota">7</span>
<span class="dec">03</span>
</div>
</li>
</ul>
</body>
</html>

bng5 · #7 (**permalink**) 06/09/2010, 15:14

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.

bng5 · #8 (**permalink**) 06/09/2010, 15:37

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?

kseso? · #9 (**permalink**) 06/09/2010, 15:45

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

alvaro0022 · #10 (**permalink**) 06/09/2010, 21:56

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.

bng5 · #11 (**permalink**) 07/09/2010, 13:56

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.

kseso? · #12 (**permalink**) 07/09/2010, 15:36

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.

alvaro0022 · #13 (**permalink**) 19/03/2011, 23:10

Cita:

Iniciado por alvaro0022

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