Pasar el Mouse por la imagen y dar informacion

elremolino · #1 (**permalink**) 12/06/2010, 22:12

Hola , saben quiero hacer en mi web algo que me gustaria
que al pasar el mouse sobre una de las imagenes que salga una descripcion y/o informacion del contenido antes de hacerle click en la imagen para ver el contenido
Buenas espero que me ayuden y ojala q me entiendan.

Saludos

caricatos · #2 (**permalink**) 13/06/2010, 00:55

Hola:

Lo más fácil, y funciona también con javascript desactivado, es usar un atributo title con esa descripción.

Saludos

elremolino · #3 (**permalink**) 13/06/2010, 19:26

Gracias por tu respuesta!, quisas tengas un ejemplo de ello por favor?

Carlangueitor · #4 (**permalink**) 13/06/2010, 20:02

Pues tendrás que leer un poco de html.

Se refiere a esto:

Código HTML:

Ver original<a href="#" title="descripción o información">Enlace</a>

Saludos

cuachanilla · #5 (**permalink**) 13/06/2010, 20:25

Cita:

Iniciado por elremolino

Gracias por tu respuesta!, quisas tengas un ejemplo de ello por favor?

Puedes revisar el siguiente codigo, TITLE lo puedes poner antes del scr de la imagen o despues de ella, de esta forma:

TITLE="lo que quieras poner"

Código HTML:

<img src="http://chovenaplaza.files.wordpress.com/2009/02/mono_pensador.jpg" TITLE="Chango Mono">

EMalcon · #6 (**permalink**) 07/05/2011, 19:42

Pense que darian una explicacion un poco más compleja y quisas elegante haciendo uso de JavaScript o algo yo tambien estoy interesado en eso que al pasar el mouse por una imagen automaticamente mostrara una descripcion de la imagen, si alguien tiene idea como empezar esto

Saludos

Aijoona · #7 (**permalink**) 07/05/2011, 20:30

Podes jugar con la pseudo clase css :hover. Con un poco de ingenio vas a poder hacer lo que queres.

EDIT: Aca te subi un ejemplo:

http://blog.aijoona.com/wp-content/uploads/2011/05/hover.html

angelitodiaz · #8 (**permalink**) 07/05/2011, 20:56

Hermano soy nuevo en el foro y te dare un ejemplo basico. Para los que critiquen agradesco su atencion. La idea de mi comentario es satisfacer la necesidad de este usuario y tal vez guiarle en su idea.
Supongamos tiene tu imagen en una pagina HTML.

Ingredientes:

Imagen, Evento OnMouseOver y javascript activado.

asi puedes:

Código:

<html>
<head>
<script type='text/javascript'>
    function hola()
   {
       alert('Hola Mundo....');
    }
</head>
<body>
    <img src='imagenes/figura.jpg' OnmouseOver='return hola();' />
</body>
</html>

Espero te sirva.

elremolino · #9 (**permalink**) 07/05/2011, 23:37

Hola Aijoona gracias por la idea se ve magnifico tu ejemplo, pero parece que no me va servir mucho aplicandolo con CSS, ya que necesito que me muestre una informacion distinta de cada imagen al pasar el mouse, dicha informacion lo recupero de la BD.

Hola Angelito Diaz, Gracias por tu aporte de verda muy útil yo soy muy nuevo en esto de javascript, pero nunca es tarde para aprender.

La idea que quiero realizar es como se ve en esta imagen

Miren que al pasar el mouse a la imagen me muestra una pequeña informacion descriptiva de cada imagen, estaré intentanto con la idea de angelito .

elremolino · #10 (**permalink**) 08/05/2011, 00:16

Cita:

Iniciado por Aijoona

Podes jugar con la pseudo clase css :hover. Con un poco de ingenio vas a poder hacer lo que queres.

EDIT: Aca te subi un ejemplo:

http://blog.aijoona.com/wp-content/u.../05/hover.html

Estimado en el ejemplo porque en el navegador Firefox funciona al parecer perfectamente,pero en explorer no aparece el sombreado!.

Aijoona · #11 (**permalink**) 08/05/2011, 07:50

Eso es porque use un background con opacidad, se puede lograr el mismo efecto usando un background image con un png semi transparente.

Con respecto a la tecnica a usar, cualquiera te va a servir, solo es cuestion de pensarlo.

Sea como sea, te diria que no hagas consultas ajax para obtener la informacion, sino que la mandes directamente con el site.

EDIT: Fijate el ejemplo, que agregue otra imagen con distinta info.

EMalcon · #12 (**permalink**) 08/05/2011, 10:48

Por Lo visto nuestro amigo hará uso por definitiva CSS , para lograr su cometido, pienso que seria cuestion de encotrar el fondo totalmente negro en el background-color: rgb() y bueno para que aparezca ensima de la imagen esa descripcion tendras que modificar el top: 10px; ahora la pequeña flechita de abajo nose como lo optendrias en css asi como el border, Usarias <blockquote> para el sangriado

<div class="image_info">
<h3>tu titulo</h3>
<p><blockquote>
tudescripcion
</blockquote></p>
</div>

angelitodiaz · #13 (**permalink**) 08/05/2011, 10:54

Amigo mirate esta libreria, tal ves pueda simplificarte las cosas y adaptarle a lo que necesitas. Esta alli en la red, la puedes usar con conciencia y se que lograras tu objetivo.

Saludos....

Enlace de descarga :

http://nivo.dev7studios.com/

Demos:

http://nivo.dev7studios.com/demos/

Hasta la vista....

elremolino · #14 (**permalink**) 08/05/2011, 11:47

Gracias a todos por vuestra ayuda, Bueno decidi implementarlo con CSS a sugerencia de ustedes, un demo lo estan viendo en mi 2do link abajo, pero no logro hacer el triangulo y tambien que la info aparezca más ensima si alguien tiene idea sobre esto podria ayudarme!

Gracias!

EMalcon · #15 (**permalink**) 09/05/2011, 09:39

Pienso que deberias poner un limite de texto tanto en tu titulo y en tu descripcion para que se vea un poco más profesional