[JAVASCRIPT] Imagen flotante para mouseover

Si eres usuario
Ingresa aquí »

¿Eres nuevo?

psicofxp.com

Google ?

Google
Artículos
Foros
Fotos
Videos
Amigos

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 ...

0votos

LinkBack

Herramientas

Buscar en este tema

LeaX

Mono maestre

#1 | 21.01.2006, 02:07 hs.

[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

JmN

(?)

#2 | 21.01.2006, 17:04 hs.

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!

LeaX

Mono maestre

#3 | 22.01.2006, 21:10 hs.

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.-

JmN

(?)

#4 | 22.01.2006, 21:41 hs.

Re: Imagen flotante para mouseover

Originalmente publicado por LeaX

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....

LeaX

Mono maestre

#5 | 23.01.2006, 20:41 hs.

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?

JmN

(?)

#6 | 23.01.2006, 20:58 hs.

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.

Nico7799

Mono maestre

#7 | 24.01.2006, 00:50 hs.

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

LeaX

Mono maestre

#8 | 24.01.2006, 03:51 hs.

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!

Desarrollo Web» [JAVASCRIPT] Imagen flotante para mouseover

« Tema anterior | Siguiente tema »

Herramientas	Buscar en este tema
Versión para imprimir Enviar por correo	Buscar en este tema: Búsqueda avanzada
Califica este tema
Califica este tema:

Este tema está relacionado con otros ya publicados en el sitio. Podés visitarlos ahora!
Tema	Iniciado por	Foro	Resp.	Último mensaje
Isla FLotante	Kundaline	Gastronomía	16	04.11.2009 13:19 hs.
fade en mouseover - 2 imagenes	Chamil	Desarrollo Web	2	24.01.2005 09:56 hs.
Unidad de puente flotante	Hernan vai	Hardware	6	12.07.2004 15:43 hs.
[Dreamweaver] cambiar imagen de fondo con un mouseover	chali	Diseño Web	10	03.02.2003 02:15 hs.
[Dreamweaver] como hago para que aparezca la manito en un mouseover?	mandel	Diseño Web	2	16.05.2002 04:26 hs.