Foros del Web » Programando para Internet » Javascript »

Select onchange - Mouseover - Div ?

Estas en el tema de Select onchange - Mouseover - Div ? en el foro de Javascript en Foros del Web. Hola, Tengo una lista de unos 10 productos en en lista (Select Onchange) y me gustaría que al lado se viera/apareciera una pequeña imagen (100x100px) ...
  #1 (permalink)  
Antiguo 24/04/2011, 12:40
 
Fecha de Ingreso: abril-2003
Ubicación: Valencia
Mensajes: 223
Antigüedad: 20 años, 10 meses
Puntos: 7
Select onchange - Mouseover - Div ?

Hola,

Tengo una lista de unos 10 productos en en lista (Select Onchange) y me gustaría que al lado se viera/apareciera una pequeña imagen (100x100px) de los distintos productos a medida que se vaya pasando el ratón por la lista.

Lo primero que me viene a la cabeza es mouseover y div, pero ¿se puede combinar todo eso con select onchange?

Gracias por vuestra ayuda.

Un saludo.
  #2 (permalink)  
Antiguo 24/04/2011, 14:45
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 8 meses
Puntos: 63
Respuesta: Select onchange - Mouseover - Div ?

Creo que no es muy buena idea, principalmente por la interpretación que le pueden dar los diferentes navegadores, por ejemplo al hacer:

Código HTML:
<select>
<option onMouseOver="cambiar('images/errorIcon.gif')">1</option>
<option onMouseOver="cambiar('images/flecha_azul.gif')">2</option>
<option onMouseOver="cambiar('images/flecha_hover.png')">3</option>
</select> 
Funciona muy bien en firefox, pero internet explorer y chrome no toman el evento, para mi lo mejor seria adherir el evento onChange al select y ya.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 25/04/2011, 02:37
 
Fecha de Ingreso: abril-2003
Ubicación: Valencia
Mensajes: 223
Antigüedad: 20 años, 10 meses
Puntos: 7
Respuesta: Select onchange - Mouseover - Div ?

Hola laratik,

¿A qué te refieres con "adherir el evento onchange al select"?

¿En el codigo que has puesto supongo que cambiar es una función que hay que desarrollar, no?

Internet Explorer y Chrome... siempre complicandolo todo. ¿Que sería de nosotros sin ellos? jajaja

¿Se te ocurre otro metodo de hacer lo que busco?
Lo que quiero es que al lado de la lista desplegable (del "select") se vea una pequeña imagen del producto a medida que se pase el ratón por encima del producto y que desaparezca cuando se quite el ratón.

Saludos

Última edición por chocovo; 25/04/2011 a las 02:53
  #4 (permalink)  
Antiguo 25/04/2011, 10:37
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 8 meses
Puntos: 63
Respuesta: Select onchange - Mouseover - Div ?

Hola chocovo.

1. Me refiero al colocar el manejador de eventos onChange a la etiqueta select:

Código HTML:
<select onChange="cambiar(this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
</select> 
Aunque para lo que quieres no serviría.

2. exactamente, aunque lo único que haría es cambiar el src de target, el cual es una etiqueta de imagen con ese mismo id.

Código Javascript:
Ver original
  1. function cambiar(src) {
  2.     document.getElementById("target").src = src;
  3. }

3. Seguramente la vida seria más fácil (Especialmente sin IE).

4. Realmente no se me ocurre nada más, principalmente porque por lo que he leído IE no soporta eventos para la etiqueta option y según parece chrome va por la misma linea, aunque de pronto puede salir alguna otra idea salvadora. SALUDOS.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Etiquetas: mouseover, onchange, select
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




La zona horaria es GMT -6. Ahora son las 22:03.