OnMouseOver con los elementos de un select

[jerkan]

Buenas, he buscado por el foro pero no he encontrado lo que buscaba. Lo que yo quiero hacer (que no sé si se puede) es cambiar una imagen según se pase el ratón sobre los diferentes elementos de un select (sin llegar a seleccionarlo).
¿Alguna ayuda?

[caricatos]

Hola:

Los option de los select dan muy poco juego, apenas se puede cambiar color y fuentes... y el select solo vale el evento onchange...

Me temo que no se puede... a ver si alguien sabe una respuesta "milagrosa"

Saludos

[jerkan]

Gracias Caricatos por tu rapidísima ayuda.
He conseguido hacer funcionar la cosa mínimamente haciendo una prueba poniento el evento OnMouseOver en el Select.

Código:

<SCRIPT>
function cambia(id)
{
     with( formulario )
     {
          campo.value = parseInt(campo.value) + 1;
     }
}
</SCRIPT>
<SELECT NAME="seleccion" SIZE="1" ONMOUSEOVER="cambia(this.value)">
</SELECT>

Ahora bien, no sé muy bien cómo hacer para que me cambie de imagen. He leido en el foro que lo mejor es hacer una precarga de las imagenes (no son muchas. Unas 40). Hasta ahí ningún problema. Pero cómo le hago saber al javascript qué imagen debe cargar si el atributo VALUE ya lo tengo 'ocupado' con otro valor?

[caricatos]

Hola otra vez:

No dejes de poner el código para que sepamos la respuesta (me extraña que lo hayas arreglado)...

Bueno, con respecto a las imágenes, puedes crear un array asociativo con el value de tus options como índice...

var imagen = new Array();
imagen["opcion1"] = "imagen1.gif";
imagen["opcion2"] = "imagen2.gif";
imagen["opcion3"] = "imagen3.gif";

y luego a partir de ese value:

document.images["muestra"].src = imagen[elValue];

Si tienes problemas en implementarlo, avisa.

Saludos

[jerkan]

El caso es que tengo las imagenes en una base de datos y no sé cómo hacerlo. Se me ocurre que en el evento onload del BODY podría cargar las imagenes pero no sé como comunicar el PHP y el javascript.

[caricatos]

Hola:

Entre php y javascript, solo puedes comunicarte con ajax, pero para este caso no creo que te sirva... pero tendrás un visor de las imagenes de la base de datos (como imagen.php)

Yo tengo uno así, y con el parámetro id la puedo mostrar...

imagen["opcion1"] = "imagen.php?id=1";
Si las quieres precargar, puedes encontrar la forma en las FAQs javascript

Saludos

[jerkan]

Excelente ayuda, Caricatos. Gracias. Ya casi lo tengo. Ahora tengo un poltergeist 'guapo'. Primero posteo el código:

Código:

</SCRIPT>
function cambiaImagen(idArticulo)
{
	document.getElementById("imagenMarca").src = "showImage.php?id=" + idArticulo
}
		
</SCRIPT>

<IMG ID="imagenMarca" SRC="sinImagen.jpg">

<FORM>
<SELECT NAME="seleccion" SIZE="1" ONMOUSEOVER="cambiaImagen(this.value)">
				
	<OPTION></OPTION>
<?php
	foreach( $listaArticulos as $parArticulo )
	{
		echo("<OPTION VALUE='".$parArticulo[0]."'>".$parArticulo[1]."</OPTION>");
	}
?>
</SELECT>
</FORM>

El comportamiento del poltergeist es el siguiente. Cuando situo el ratón sobre un elemento del select no se carga su imagen correspondiente. Sin embargo, la carga cuando situo el curso sobre otro elemento del select. Y así sucesivamente. Vamos, que tengo un select un poco retarded.
¿A alguien se le ocurre por qué pasa esto?

[jerkan]

Solucionado. Conseguí mi propósito poniendo el manejador de evento en los tag OPTION en vez de en el SELECT.

Código:

<SELECT NAME="seleccion" SIZE="1">
				
	<OPTION ONMOUSEOVER="cambiaImagen(this.value)"></OPTION>
<?php
	foreach( $listaArticulos as $parArticulo )
	{
		echo("<OPTION VALUE='".$parArticulo[0]."' ONMOUSEOVER='cambiaImagen(this.value)'>".$parArticulo[1]."</OPTION>");
	}
?>
</SELECT>