Foros del Web » Creando para Internet » HTML »

Diferentes MouseOver's a una Imagen

Estas en el tema de Diferentes MouseOver's a una Imagen en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/12/2005, 15:28
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
Diferentes MouseOver's a una Imagen

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.
  #2 (permalink)  
Antiguo 11/12/2005, 15:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 11/12/2005, 19:17
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
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..........
__________________

  #4 (permalink)  
Antiguo 12/12/2005, 11:24
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
  #5 (permalink)  
Antiguo 12/12/2005, 17:57
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
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.
__________________

  #6 (permalink)  
Antiguo 14/12/2005, 01:34
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
a caso es imposible??
__________________

  #7 (permalink)  
Antiguo 14/12/2005, 05:55
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #8 (permalink)  
Antiguo 15/12/2005, 11:46
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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?
  #9 (permalink)  
Antiguo 15/12/2005, 17:19
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
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??
__________________

  #10 (permalink)  
Antiguo 16/12/2005, 13:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
  #11 (permalink)  
Antiguo 19/12/2005, 11:55
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.

Última edición por furoya; 22/12/2005 a las 11:15
  #12 (permalink)  
Antiguo 21/12/2005, 18:32
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
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.
__________________

  #13 (permalink)  
Antiguo 22/12/2005, 11:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
  #14 (permalink)  
Antiguo 23/12/2005, 00:45
 
Fecha de Ingreso: febrero-2005
Ubicación: MEXICO
Mensajes: 455
Antigüedad: 12 años, 10 meses
Puntos: 5
ok. gracias por todo.
__________________

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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 20:38.