pagina con desplegable (select)

core_2duo · #1 (**permalink**) 27/04/2007, 09:01

Hola, tengo una pagina con una imagen, con un desplegable (select) con "muchas" opciones más otras cosas más, entonces la idea es que cuando se seleccione una opcion y se pulse el boton cambie la imagen pero el resto de la pagina siga igual.

Mi pregunta es, ¿tengo que crear tantas paginas .htm como opciones hay en el select para que redirijan a esa pagina con esa imagen? ¿o hay alguna forma de trabajar en la misma pagina y cambiar solo la imagen?
Lo digo por evitar tener 30 paginas html con el mismo codigo, con la unica diferencia de la imagen.

Este es el codigo de la pagina:

Código HTML:

<html>
 <head>

</head>
 <body>
 <h3 class="titulo">Distribución territorial de la provincia de Almería</h3>

<div>
    <img src="img/otro.png"/>
</div>

    
    <form>
<SELECT NAME="municipios">
<option selected>--- MUNICIPIOS ---
<option value="seccion1.html">Abla  
<option value="seccion1.html">Abrucena 
<option value="seccion1.html">Adra  
<option value="seccion1.html">Albánchez  
<option value="seccion1.html">Alboloduy  
<option value="seccion1.html">Albox  
<option value="seccion1.html">Alcolea 
<option value="seccion1.html">Alcóntar 
<option value="seccion1.html">Alcudia de Monteagud 
<option value="seccion1.html">Alhabia  
<option value="seccion1.html">Alhama de Almería  
<option value="seccion1.html">Alicún  
<option value="seccion1.html">Almería  
<option value="seccion1.html">Almócita 
<option value="seccion1.html">Alsodux  
<option value="seccion1.html">Antas  
<option value="seccion1.html">Arboleas  
<option value="seccion1.html">Armuña de Almanzora  
<option value="seccion1.html">Bacares  
<option value="seccion1.html">Bayárcal  
<option value="seccion1.html">Bayarque  
<option value="seccion1.html">Bédar  
<option value="seccion1.html">Beires  
<option value="seccion1.html">Benahadux  
<option value="seccion1.html">Benitagla  


</SELECT>
<input type="button" value="Buscar" onClick="location=this.form.municipios.value" name="button">
</form>

</body>

</html>

JavierB · #2 (**permalink**) 27/04/2007, 09:08

Hola core_2duo

Pon así la imagen:

<img src="img/otro.png" id="imagen" />

y así el select:

Código:

<select onchange = "document.getElementById('imagen').src = this.value">
<option value="imagen1.jpg">Uno</option>
<option value="imagen2.jpg">Dos</option>

Saludos,

core_2duo · #3 (**permalink**) 27/04/2007, 09:36

Muchas gracias JavierB

La solucion que me has dado esta muy fina, jejeje

tunait · #4 (**permalink**) 28/04/2007, 06:42

tema trasladado desde (x)html

derkenuke · #5 (**permalink**) 28/04/2007, 18:50

O incluso, otra propuesta si quieres abrir una nueva página:

Colocas en el select las rutas tipo:
<option value="verimagen.html?img=atardecer.jpg">El atardecer</option>

Y en verimagen.html puedes leer esa variable img de valor atardecer.jpg y dibujar la imagen atardecer.jpg en el documento verimagen.html.

Saludos.