Foros del Web » Programando para Internet » Javascript »

Pasar el Mouse por la imagen y dar informacion

Estas en el tema de Pasar el Mouse por la imagen y dar informacion en el foro de Javascript en Foros del Web. Hola , saben quiero hacer en mi web algo que me gustaria que al pasar el mouse sobre una de las imagenes que salga una ...
  #1 (permalink)  
Antiguo 12/06/2010, 22:12
Avatar de elremolino  
Fecha de Ingreso: mayo-2007
Mensajes: 211
Antigüedad: 14 años, 8 meses
Puntos: 2
Pasar el Mouse por la imagen y dar informacion

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
  #2 (permalink)  
Antiguo 13/06/2010, 00:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 19 años, 9 meses
Puntos: 1284
Respuesta: Pasar el Mouse por la imagen y dar informacion

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 13/06/2010, 19:26
Avatar de elremolino  
Fecha de Ingreso: mayo-2007
Mensajes: 211
Antigüedad: 14 años, 8 meses
Puntos: 2
Respuesta: Pasar el Mouse por la imagen y dar informacion

Gracias por tu respuesta!, quisas tengas un ejemplo de ello por favor?
  #4 (permalink)  
Antiguo 13/06/2010, 20:02
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 13 años, 10 meses
Puntos: 1329
Respuesta: Pasar el Mouse por la imagen y dar informacion

Pues tendrás que leer un poco de html.

Se refiere a esto:
Código HTML:
Ver original
  1. <a href="#" title="descripción o información">Enlace</a>

Saludos
__________________
Grupo Telegram Docker en Español
  #5 (permalink)  
Antiguo 13/06/2010, 20:25
 
Fecha de Ingreso: junio-2010
Mensajes: 3
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Pasar el Mouse por la imagen y dar informacion

Cita:
Iniciado por elremolino Ver Mensaje
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"> 
  #6 (permalink)  
Antiguo 07/05/2011, 19:42
 
Fecha de Ingreso: febrero-2007
Mensajes: 37
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Pasar el Mouse por la imagen y dar informacion

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
  #7 (permalink)  
Antiguo 07/05/2011, 20:30
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 10 años, 8 meses
Puntos: 343
Respuesta: Pasar el Mouse por la imagen y dar informacion

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
__________________
blog | @aijoona

Última edición por Aijoona; 07/05/2011 a las 20:45
  #8 (permalink)  
Antiguo 07/05/2011, 20:56
 
Fecha de Ingreso: mayo-2011
Ubicación: Venezuela
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Pasar el Mouse por la imagen y dar informacion

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.
  #9 (permalink)  
Antiguo 07/05/2011, 23:37
Avatar de elremolino  
Fecha de Ingreso: mayo-2007
Mensajes: 211
Antigüedad: 14 años, 8 meses
Puntos: 2
Respuesta: Pasar el Mouse por la imagen y dar informacion

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 .
  #10 (permalink)  
Antiguo 08/05/2011, 00:16
Avatar de elremolino  
Fecha de Ingreso: mayo-2007
Mensajes: 211
Antigüedad: 14 años, 8 meses
Puntos: 2
Respuesta: Pasar el Mouse por la imagen y dar informacion

Cita:
Iniciado por Aijoona Ver Mensaje
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!.
  #11 (permalink)  
Antiguo 08/05/2011, 07:50
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 10 años, 8 meses
Puntos: 343
Respuesta: Pasar el Mouse por la imagen y dar informacion

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.
__________________
blog | @aijoona
  #12 (permalink)  
Antiguo 08/05/2011, 10:48
 
Fecha de Ingreso: febrero-2007
Mensajes: 37
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Pasar el Mouse por la imagen y dar informacion

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>
  #13 (permalink)  
Antiguo 08/05/2011, 10:54
 
Fecha de Ingreso: mayo-2011
Ubicación: Venezuela
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Pasar el Mouse por la imagen y dar informacion

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....
  #14 (permalink)  
Antiguo 08/05/2011, 11:47
Avatar de elremolino  
Fecha de Ingreso: mayo-2007
Mensajes: 211
Antigüedad: 14 años, 8 meses
Puntos: 2
Respuesta: Pasar el Mouse por la imagen y dar informacion

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!

Última edición por elremolino; 08/05/2011 a las 18:53
  #15 (permalink)  
Antiguo 09/05/2011, 09:39
 
Fecha de Ingreso: febrero-2007
Mensajes: 37
Antigüedad: 14 años, 11 meses
Puntos: 1
Respuesta: Pasar el Mouse por la imagen y dar informacion

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

Etiquetas: dar, informacion, mouse, pasar
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 13:49.