Estás en: Inicio >> Foros >> Informática >> Webmasters >> Desarrollo Web
Desarrollo Web /

[JAVASCRIPT] Imagen flotante para mouseover

Participa en el tema [JAVASCRIPT] Imagen flotante para mouseover en el foro Desarrollo Web.
Wenas, vi en varias webs, que cuando uno pasa con el mouse sobre una caja ...

Buscar en este tema:
Búsqueda avanzada
Respuesta
 
  • desconectado

    • 604

      MENSAJES

     
    LeaX escribió el 20/01/2006 a las 23:07 hs.
     
    ¿Mensaje inapropiado?
    #1 [JAVASCRIPT] Imagen flotante para mouseover
    Wenas, vi en varias webs, que cuando uno pasa con el mouse sobre una caja en css o una tabla por ejemplo, se despliega una imagen o un texto en otra caja... para ke me entiendan mejor, por ejemplo cuando uno navega en el foro de psico, y posiciona el mouse sobre un thread, se despliega un preview con el texto principal y demas... en psico esta echo con javascript, pero me preguntaba si alguno de ustedes tiene la remota idea de como hacerlo con un poco de xhtml y css... porque hace poco hice un menu desplegable con estos lenguajes y no fue nada dificil.-

    Desde ya, gracias.-

    LeaX

    Responder a este tema

    Citar

    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/desarrollo-web.264/319294-javascript-imagen-flotante-para-mouseover.html
    | Más
  • desconectado

    • 509

      MENSAJES

    JmN escribió el 21/01/2006 a las 14:04 hs. ¿Mensaje inapropiado?

    #2 Re: Imagen flotante para mouseover

    podes usar "title" en tus elementos...

    o podes usar un tooltip en javascript... p.e http://www.walterzorn.com/tooltip/tooltip_e.htm

    Saludos!

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 604

      MENSAJES

    LeaX escribió el 22/01/2006 a las 18:10 hs. ¿Mensaje inapropiado?

    #3 Re: Imagen flotante para mouseover

    Gracias pero no me interesa mucho poner algo de javascript para hacer algo ke creo yo ke puede tener una solución simple.-

    Perdón por mi ignorancia, pero el unico uso que se me viene a la mente para la propiedad title es un boton para cambiar el title de la web :P.-

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 509

      MENSAJES

    JmN escribió el 22/01/2006 a las 18:41 hs. ¿Mensaje inapropiado?

    #4 Re: Imagen flotante para mouseover

    Originalmente publicado por LeaX
    Gracias pero no me interesa mucho poner algo de javascript para hacer algo ke creo yo ke puede tener una solución simple.-

    Perdón por mi ignorancia, pero el unico uso que se me viene a la mente para la propiedad title es un boton para cambiar el title de la web :P.-
    La opcion simple te la di... title... si sabes que es google, por dar un ejemplo, podrias buscar como se usa para lo que queres.

    La otra es una opcion secundaria... por si no te llegara a servir title... podes hasta hacer tooltips con html dentro y ademas es unobtrusive javascript, por lo que se implementa como una soluccion bastante simple....

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 604

      MENSAJES

    LeaX escribió el 23/01/2006 a las 17:41 hs. ¿Mensaje inapropiado?

    #5 Re: Imagen flotante para mouseover

    Sisi, ya se lo ke es un atributo title.. es lo mismo que el alt mas o menos, es para darle una descripcion por ejemplo a una imagen o a un link.. el problema es ke yo kiero meter una imagen en la etiqueta que sale cuando el mouse pasa sobre el elemento, y creo que eso es imposible, o no?

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 509

      MENSAJES

    JmN escribió el 23/01/2006 a las 17:58 hs. ¿Mensaje inapropiado?

    #6 Re: Imagen flotante para mouseover

    No... no es imposible... podes agregar todo el html que quieras en una capa oculta y posicionarla donde quieras, pero necesitarias que se vea cuando pase el mouse por encima... pero ya entrarias en la capa de comportamiento y tenes que usar javascript...

    Saludos.

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 541

      MENSAJES

    Nico7799 escribió el 23/01/2006 a las 21:50 hs. ¿Mensaje inapropiado?

    #7 Re: Imagen flotante para mouseover

    Perdon que me meta, pero porque tanto rechazo a usar un par de lineas en Javascript LeaX? Lo haces ver como si fuera algo complicado, poco comun y algo que nadie quiere utilizar. Y no es asi. Javascript es RE contra util hoy en dia para muchas cosas y no es dificil de implementar.

    La solucion es exactamente la que dijo JmN en su ultimo post. Y solo requiere un par de lineas de javascript, que son muy faciles de utilizar.
    Usas un DIV oculto, en donde pones todo el contenido. Cuando alguien pasa el mouse por determinado link usas estos codigos javascript para mostrarlo o ocultarlo:
    Código:
    function show_div(div_id) {
	  // show the requested div
	  document.getElementById(div_id).style.display = 'block';
}
function hide_div(div_id) {
	  // hide the requested div
	  document.getElementById(div_id).style.display = 'none';
 }
    Es solo un ejemplo. Pero no requiere mucho mas q eso.

    Saludos,
    Nicolas

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 604

      MENSAJES

    LeaX escribió el 24/01/2006 a las 00:51 hs. ¿Mensaje inapropiado?

    #8 Re: Imagen flotante para mouseover

    Gracias... yo como gran novato no entendi mucho de lo de arriba pero lo voy a archivar para cuando sepa un poco mas de javascript...

    El problema lo solucione solo con css, use el mismo principio del menu desplegable...

    Esto es todo (meto todo en listas):
    Código:
    #imagendesplegable li {
position:inherit}
#imagendesplegable ul ul {
position: absolute;
z-index: 500;
float: left }
#imagendesplegable ul ul ul {
position: absolute;
top: 0;
left: 100% }
div#imagendesplegable ul ul,
div#imagendesplegable ul li:hover ul ul,
div#imagendesplegable ul ul li:hover ul ul
{display: none;}
div#imagendesplegable ul li:hover ul,
div#imagendesplegable ul ul li:hover ul,
div#imagendesplegable ul ul ul li:hover ul
{display: block;}
    Gracias!

    Responder

    Citar

    Me gusta este mensaje
Estás en: Inicio >> Foros >> Informática >> Webmasters >> Desarrollo Web


Estadísticas del tema
  • 7 RESPUESTAS
  • 8583 VISTAS
  • 3 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB