Imagen con enlace dentro de otra imagen con enlace

Carlmycol · #1 (**permalink**) 27/12/2011, 12:47

Pues exactamente lo que dice en el título encesito hacer, se que se puede resolver poniendo la imagen como fondo de un div y dentro dl div la otra imagen, sin embargo, debo hacerlo con imágenes miniatura y no hallo la forma de encajar la imagen haciéndola proporcionalmente mas pequeña sin usar javascript. ¿Alguna idea? Intenté con z-index y no funcionó, quizás fue un uso erróneo.

Tengo esto.

Código HTML:

Ver original<div id="categories" class="sortableList">
 
                              <div id="img_11" style="float:left; border:#000;">
 
                <a href="#">H</a>
 
                <img src="eventos/11/1.jpg" />
 
               </div>
 
                         <div id="img_9" style="float:left; border:#000;">
 
                <a href="#">H</a>
 
                <img src="eventos/9/1.jpg" />
 
               </div>
 
                         <div id="img_10" style="float:left; border:#000;">
 
                <a href="#">H</a>
 
                <img src="css_files/unexist.png" />
 
               </div>
 
                    <hr style="clear:both;border:0;visibility:none;">
 
     </div>

Y este css

Código CSS:

Ver original#categories div
 
{
 
    margin-left:2px;
 
    margin-top:20px;
 
    cursor:move;
 
}
 
#categories img, #categories div
 
{
 
    width:200px; height:286px;
 
}
 
#categories div a
 
{
 
    z-index:2;  
 
}

Si tienen alguna idea... Yo quiero hacer algo esteticamente como youtube en videos destacados, que encima de la miniatura sale un enlac para añadirlo a lista de reproduccion.

Saludos y gracias de antemano

IsaBelM · #2 (**permalink**) 27/12/2011, 14:32

no sé que es lo que hace youtube, puesto que no entro. veamos si es algo como esto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
.contenedor {
border: 1px solid red;
width: 518px;
height: 320px;
}

.contenedor .oculto{
z-index: 99;
position: relative;
top: -178px; /* mitad height .contenedor + mitad height imagen de fondo */
left: 214px; /* mitad width .contenedor - mitad width imagen de fondo */
width: 89px;
height: 36px;
}

.contenedor:hover .oculto{
opacity: .7;
background-position: center center;
background-image: url("ver_mas.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>

<div class="contenedor">
<a href="descargar.php"><img src="img1.png" alt="fondo" /></a>
<div class="oculto"><a href="vermas.php"><img src="sprite_pixel.gif" width="89px" height="36px" alt="trasparente" /></a></div>
</div>

</body>
</html>