Diferentes MouseOver's a una Imagen

cpucpu · #1 (**permalink**) 11/12/2005, 15:28

Existe elguna manera de hacer varios mouseover a una imagen?

de momento puedo utilizar diferentes <areas> dentro de un <map> y asi lograr diferentes Links dentro de una imagen....pero pues lo que me interesa es hacerlo MouseOver's.

No se si exista algun Dhtml, javascript o metodo para lograr esto, espero que alguien sepa, Saludos.

caricatos · #2 (**permalink**) 11/12/2005, 15:48

Hola:

Puedes hacer asignaciones de métodos a variables "array" y luego hacer una llamada "aleatoria"...
function over1() {
...
}
function over2() {
...
}
function over3() {
...
}

var over = new Array(over1, over2, over3);
...

onmouseover="over[Math.random() * over.length]()"

Saludos

cpucpu · #3 (**permalink**) 11/12/2005, 19:17

la verdad es que entiendo remotamente el javascript, pero creo que eso seria para cargar imagenes aleatorias (o no estoy seguro)...

la razon por la que deseo hacer varios mouse over es la siguiente:

tengo una imagen con tres iconos...

y deseo que al pasar el mouse por cada una de ellas me aparesca el nombre de la misma, de esta manera...

Algo asi como intercambiar
"onMouseOut.jpg" - "inicio.jpg" - "onMouseOut.jpg" ;
"onMouseOut.jpg" - "contacto.jpg" - onMouseOut.jpg" ;
"onMouseOut.jpg" - "favoritos.jpg" - "onMouseOut.jpg"

Creo que ha de ser algo simple, pero no se como..........

furoya · #4 (**permalink**) 12/12/2005, 11:24

Hola cpucpu , caricatos :

Las areas aceptan un title (al menos en IE y FF). Otra solución sería agregar una capa con el texto y que aparezca cuando se pone el puntero sobre el area y desaparezca cuando sale.

Si el tema es no usar areas, se puede cortar la imagen en 3 partes.

cpucpu · #5 (**permalink**) 12/12/2005, 17:57

no puedo hacer tres imagenes puesto que el texto no cabria, es decir que palabras como "favoritos" serian demasiado para largas para un solo dibujo, por eso quiero que hacer los mouse overs.

Cita:

Otra solución sería agregar una capa con el texto y que aparezca cuando se pone el puntero sobre el area y desaparezca cuando sale.

me partece bien, encontre un javascipt que esconde capas...

mi consulta:
Se puede esconder capas de otra manera(sin javascript),puesto que alguien que no tenga javascrpt vera las capas amontadas y estobandose entre ellas.

cpucpu · #6 (**permalink**) 14/12/2005, 01:34

a caso es imposible??

JavierB · #7 (**permalink**) 14/12/2005, 05:55

Hola cpucpu

Para mostrar/ocultar capas tienes que usar JavaScript, no puedes hacerlo solo con HTML. De todas formas en el momento que pongas onmouseover ya estás usando JavaScript.

Saludos,

furoya · #8 (**permalink**) 15/12/2005, 11:46

hola todos :

lo de las tres imágenes sería sólo para el evento, cpucpu; las capas de texto son independientes.

Si "encontraste" un javascript que esconde capas supongo que eres nuevo en ésto y estás copiando y pegando. Te dejo un ejemplo de cómo quedaría con un mapa y tres capas de texto (en este caso no hice las imàgenes porque no valìa la pena, se entiende igual)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><title></title>

<style>
#alfa{position:relative; height:249px; width:397; border:0; }
#bravo{border-collapse:collapse; }
#charly{position:absolute; top:165px; left:20px; height:10px; width:35px; visibility:hidden; }
#delta{position:absolute; top:165px; left:49px; height:10px; width:35px; visibility:hidden; }
#eco{position:absolute; top:165px; left:78px; height:10px; width:35px; visibility:hidden; }


</style>
</head><body>

<map name="foxtrot">
<area shape="rect" coords="20,150,40,160" title="B" href="#"  onmouseover="document.getElementById('charly').style.visibility='visible'" 
onmouseout="document.getElementById('charly').style.visibility='hidden';" />

<area shape="rect" coords="50,150,70,160" title="C" href="#"  onmouseover="document.getElementById('delta').style.visibility='visible'" 
onmouseout="document.getElementById('delta').style.visibility='hidden';" />

<area shape="rect" coords="95,150,110,160" title="D" href="#"  onmouseover="document.getElementById('eco').style.visibility='visible'" 
onmouseout="document.getElementById('eco').style.visibility='hidden';" />
</map>

<div id="alfa">
<img src="http://img521.imageshack.us/img521/5760/untitled1vg.jpg" id="bravo" 
usemap="#foxtrot" >

<img src="http://www.forosdelweb.com/images/statusicon/user_online.gif" id="charly" />
<img src="http://www.forosdelweb.com/images/statusicon/user_invisible.gif" id="delta" />
<img src="http://www.forosdelweb.com/images/statusicon/user_offline.gif" id="eco" />
</div>

</body></html>

Cita:

Iniciado por JavierB ( )

...Para mostrar/ocultar capas tienes que usar JavaScript, no puedes hacerlo solo con HTML....

¿Y usando hover?

cpucpu · #9 (**permalink**) 15/12/2005, 17:19

Si, la verdad es que no le entiendo muho al javas...pero bueno, me oriento mas al layout y al diseño...

gracias por la ayuda.

Cita:

Iniciado por furoya

Cita:

Iniciado por JavierB

...Para mostrar/ocultar capas tienes que usar JavaScript, no puedes hacerlo solo con HTML....

¿Y usando hover?

o sea que si se puede??

furoya · #10 (**permalink**) 16/12/2005, 13:54

No, no es nada. Nos diste la excusa para poner un ejemplo que no sé si está muy repetido.

Lo del hover es una idea. Firefox lo aceptaría, IE solamente en enlaces.

JavierB tiene la costumbre de decir que 'no' para obligarnos a pensar en algún truco o salida -no siempre elegante en mis casos- y así no tiene que trabajar él (

).

Hay muchas otras formas de hacerlo, y si se me ocurre alguna con CSS que pueda funcionar al menos en esos 2 navegadores la posteo.

furoya · #11 (**permalink**) 19/12/2005, 11:55

Veamos cómo anda ésto

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>
<style>
a.botones{position:relative; z-index:100; text-decoration:none; cursor:default; vertical-align:top; }

a.botones img{border:0; margin:0 0 10px 0; vertical-align:top; }

a.botones:hover{z-index:101; background:none; }

a.botones span{display:none; }

a.botones:hover .boton0{display:block; position:absolute; top:15px; left:0; }

a.botones:hover .boton1{display:block; position:absolute; top:15px; left:-8px; }

a.botones:hover .boton2{display:block; position:absolute; top:15px; left:-15px; }

#imgn0, #imgn1, #imgn2{width:30px; height:10px; }

</style>
</head>
<body>
<h2>Ejemplo.</h2>
&nbsp;
<a class="botones" href="http://www.forosdelweb.com/forumdisplay.php?f=4" title="(X)HTML "><img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" /><span class="boton0"> <img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" id="imgn0" /></span></a>
<a class="botones" href="http://www.forosdelweb.com" title="Foros del Web "><img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif" /><span class="boton1"> <img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif" id="imgn1" /></span></a>
<a class="botones" href="http://www.forosdelweb.com/showthread.php?t=356569" 
title="Diferentes MouseOver's a una Imagen "><img src="http://www.forosdelweb.com/images/smilies/cool.gif" /><span 
class="boton2"> <img src="http://www.forosdelweb.com/images/smilies/cool.gif" id="imgn2" 
/></span></a>

QWERTYUIOP

<br />

QWERTYUIOP
</body>
</html>

Es para enlaces, como bien acotó JavierB no tiene sentido si le agregas eventos de ratón para disparar escripts. Y si es para que no le aparezcan las capas amontonadas a quien tenga deshabilitado JS, se las ocultas con CSS y se las apareces si habilita javascript. Mientras tanto, que vea los tooltips.

cpucpu · #12 (**permalink**) 21/12/2005, 18:32

bien, por poco y se me olvida buscarlo.

...supongo que en los spans puedo poner lo que se me antoje, tambien supongo que ahora puedo posicionar las capas donde quiera utilizando "position:absolute" "top:Y" "left:X"...pero..

Por que los valores "top:" y "left:" son tomados a partir de la imagen que ejecuta el display:block (o sea la que activa el span), es decir:
por que los valores top:0 left:0 me posicionan en la parte superior izquierda de la imagen (o sea que la imagen "gorda "queda encima de la otra) (y no en la parte superior izquierda de la pantalla) (se supone que "absoluto" es un mundo independiente y por tanto [supongo yo] la imagen gorda deberia quedar en el pixel 1,1 de la pantalla[del navegador])

es me confundo? un poquito.

furoya · #13 (**permalink**) 22/12/2005, 11:14

Las medidas se toman a partir de cada enlace (que contienen ambas imágenes) y llevan posición relativa; ésto es lo que usan de referencia los "cartelitos" que están representados por las imágenes gordas en posición absoluta. Como aparecen con hover, cada una toma la posición de su propio enlace. El top:15px es porque los íconos miden 15px de alto. prueba quitarle la posición relativa a los enlaces.

cpucpu · #14 (**permalink**) 23/12/2005, 00:45

ok. gracias por todo.