Foros del Web » Creando para Internet » Diseño web »

Como se hace esto ?

Estas en el tema de Como se hace esto ? en el foro de Diseño web en Foros del Web. Que uno pasa con el Mouse sobre la foto y Brinda informacion me gustaria saber como se hace ? http://www.expomodacolombia.com/2009/aguja.php...
  #1 (permalink)  
Antiguo 30/05/2009, 17:47
 
Fecha de Ingreso: julio-2008
Ubicación: Colombia
Mensajes: 117
Antigüedad: 9 años, 4 meses
Puntos: 0
De acuerdo Como se hace esto ?

Que uno pasa con el Mouse sobre la foto y Brinda informacion me gustaria saber como se hace ?

http://www.expomodacolombia.com/2009/aguja.php
  #2 (permalink)  
Antiguo 30/05/2009, 17:54
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Como se hace esto ?

Si miras un poco el código te darás cuenta que la foto esta en un div y dentro de este div esta puesta la descripción con otro div, este tiene la propiedad display:none, para que no se muestre.

Luego en el id del mismo div, que es nombre_participante, en la propiedad hover tiene un display block que les muestra el texto.

Si no lo has entendido muy bien es mejor que mires CSS, para entender los conceptos y así guiarte mejor y hacer cosas como las de la web que has mostrado
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 30/05/2009, 17:54
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: Como se hace esto ?

es una capa oculta, superpuesta a la foto, que se vuelve visible al pasar el ratón.
Código HTML:
 <div id="participante">
        <div id="nombre_participante">
			<b>Diana Patricia Galvis</b><br>
            Cencoes&nbsp;0 sem.<br>
            <i>Estrategia:</i> La compañia de Dios quien es el que da la fortaleza para hacer las cosas<br>
            <i>Elementos:</i> Lienzo; Tijeras; Piola        </div>

            <img src="img_aguja/dianapatriciagalvis.jpg" width="150" height="150">
        </div> 
Código HTML:
#nombre_participante
{
width: 140px;
position: absolute;
z-index: 10;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
display: none;
height: 150px;
}
#participante:hover 
{
width: 140px;
position: absolute;
z-index: 10;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: transparent;
background-image: url(img/seccion_bg.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0% 0%;
display: block;
height: 150px;
}
  #4 (permalink)  
Antiguo 30/05/2009, 17:59
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Como se hace esto ?

fijate este codigo, si lo modificas un poquito ya tienes lo que quieres:

Código HTML:
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:50px; left:50px; 
z-index:3;}

#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}

#box a span {display:none;}

#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>

<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit amet</span></a></div>

</body>
</html> 
Esto se ve asi aktuell.de.selfhtml.org/artikel/css/infobox/beispiel1.htm


fuente: aktuell.de.selfhtml.org/artikel/css/infobox/
  #5 (permalink)  
Antiguo 30/05/2009, 18:03
 
Fecha de Ingreso: julio-2008
Ubicación: Colombia
Mensajes: 117
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Como se hace esto ?

Gracias por la informacion
  #6 (permalink)  
Antiguo 30/05/2009, 18:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como se hace esto ?

Pues es una pena que todos los usuarios de ie6 se queden sin esa información.
Si vas a implementarlo en tus páginas, yo optaría por menos divitis y colocar la imagen como un enlace (<a href="#"...) y esa información en un span.

Pero es sólo lo que yo haría
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 05:40.