poner una imagen con un option

gazaposa · #1 (**permalink**) 12/11/2011, 09:58

buenas, estoy haciendo un trabajo de la uni, y tengo que hacer lo siguiente:
tengo un formulario y tiene una lista desplegable, lo que pretendo hacer es que al pulsar por ejemplo africa me muestre al lado de la celda una imgan del mapa de africa y no se como hacerlo. lo he intendao de muchas formas he buscado informacion por inernet y nada de nada, son mi salvaciio. tengo que entregar el trabajo el lunes y solo me queda esto.
muchas gracias
el codigo que tengo es este:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>PRUEBA 1</title>
</head>
<body>
<center>
<h1>Formulario de inscripción</h1>
<center> <br>
<center>
<table border="1">
<tbody>
<tr>
<td>Nombre</td>
<td><input name="NOMBRE" size="25" type="TEXT"></td>
<td rowspan="7">Celda C1</td>
</tr>
<tr>
<td height="29">Apellido</td>
<td><input name="APELLIDO" size="25" type="TEXT"></td>
</tr>
<tr>
<td>Correo electronico</td>
<td><input name="E-MAIL" size="30" type="TEXT"></td>
</tr>
<tr>
<td>Contraseña de acceso</td>
<td><input name="CLAVE" size="12" type="PASSWORD"> </td>
</tr>
<tr>
<td>Sexo</td>
<td><input name="SEXO" value="VARON" type="RADIO">Varon
<input name="SEXO" value="MUJER" type="radio">Mujer <input name="SEXO"
value="NO CONESTA" type="radio">No conesta</td>
</tr>
<tr>
<td>Servicios a solicitar</td>
<td><input name="servicio" value="activado"
type="checkbox">Servicio 1 <br>
<br>
<input name="servicio" value="activado"
type="checkbox">Servicio 2<br>
<br>
<input name="servicio" value="activado"
type="checkbox">Servicio 3</td>
</tr>
<tr>
<td>Continente de origen</td>
<td>
<select name="CONTINENTE">
<option>--- </option>
<option> Africa </option>
<option> America </option>
<option> Asia </option>
<option> Europa </option>
<option> Oceania </option>
</select>
</td>
</tr>
</tbody>
</table>
</center>
<br>
<center> <input value="Enviar" input="" type="submit"><input
value="Borrar" type="reset"></center>
</center>
</center>
</body>
</html>

gracias de nuevo

kramerIXI · #2 (**permalink**) 12/11/2011, 10:03

Creo que podria hacerse mediante Javascript, que dependiendo la opcion que aparezca haga aparecer una imagen u otra. No te puedo ayudar mas porque en Javascript ando perdido.

Un Saludo

memoadian · #3 (**permalink**) 12/11/2011, 10:18

si tienes un texto de áfrica pues ponle un onclick="ver_imagen('valor')"

en valor va algo como 'africa', 'oceania', 'america'
y en la funcion con javascript

Código Javascript:

Ver originalfunction ver_imagen(valor){
if(valor == 'africa'){
document.getElementById('mapa').innerHTML = '<img src="africa.png" alt="mapa africa"/>';
}else if(valor == 'america'){
document.getElementById('mapa').innerHTML = '<img src="america.png" alt="mapa america"/>';
}else{
document.getElementById('mapa').innerHTML = '<img src="otro.png" alt="otro mapa"/>';
}
}

y tu html muy simple

Código HTML:

Ver original<div>
<a href="javascript:void()" onclick="ver_imagen('africa');">África</a>
<a href="javascript:void()" onclick="ver_imagen('america');">Ámerica</a>
<div id="mapa"></div>
</div>

memoadian · #4 (**permalink**) 12/11/2011, 17:18

No pude evitar releer tu post y la respuesta es diferente a lo que pretendes, pero aun asi es muy facil :)

Código HTML:

Ver original<div>
<select onChange="ver_imagen(this.value);">
    <option value="africa">África</option>
    <option value="america">América</option>
</select>
<div id="mapa"></div>
</div>

esto con la funcion de arriba no tiene problemas :)

IsaBelM · #5 (**permalink**) 12/11/2011, 18:46

yo haría una variación al código de memoadian. en lugar de usar innerHTML, modificaría el dom de una imagen

memoadian · #6 (**permalink**) 13/11/2011, 01:00

¿por que no usar Inner?

ahor ya esta aceptado en html5

comprendo que se decia que esto era invención de IE pero la verdad que ahorra muchisimo trabajo con el dom.

gazaposa · #7 (**permalink**) 13/11/2011, 03:48

memoadian no entiendo tu codigo!!!!
<div>
<select onChange="ver_imagen(this.value);">
<option value="africa">África</option>
<option value="america">América</option>
</select>
<div id="mapa">
</div>
</div>
donde esta la funcion onChange????? que valor le pasas???
donde carga la imagen????
para que utilizas :
<div id="mapa">
</div>

lo has probado a ver si da resultado???ç
la imagen se tiene que cargar en Celda C1
gracias por las demas contestaciones, pero es que no puedo utilizar java. pero de todas formas gracias

IsaBelM · #8 (**permalink**) 13/11/2011, 09:18

no, no .... al contrario. modificar el dom es mas rápido (en ejecución)

Cita:

function fnc(valor){
document.getElementById('mapa').innerHTML = '<img src="'+valor+'.png" alt="mapa'+valor+'" />';
}

function fnc2(valor){
document.getElementById('img').src = valor + '.png';
document.getElementById('img').alt = 'mapa' + valor;
}

<div>
<select onChange="fnc(this.value);">
<option value="img1">África</option>
<option value="img2">América</option>
</select>
<div id="mapa"><img id="img" src="defecto.png" alt="" /></div>
</div>

el primer método es el mismo que el tuyo, sólo que sin condicionales. imagina que fuesen provincias de un país, la de condicionales que habría que hacer.

el segundo es modificando el atributo src. no has de insertar una vez tras otra toda la cadena

Cita:

Iniciado por gazaposa

[B]
donde esta la funcion onChange????? no es una función, es el evento que se usa para invocar a la función ver_imagen() que valor le pasas??? el que tenga la opción que has seleccionado
donde carga la imagen???? en el bloque #mapa
para que utilizas : donde se mostrará la imagen
<div id="mapa">
</div>

lo has probado a ver si da resultado??? funciona
la imagen se tiene que cargar en Celda C1 Celda C1, mapa. aquí no hay videntes
gracias por las demas contestaciones, pero es que no puedo utilizar java. pero de todas formas gracias java no es lo mismo que javascript. si no puedes usar javascript, no podrás hacerlo

gazaposa · #9 (**permalink**) 13/11/2011, 09:23

es que no puedo utilizar java, solo html

emprear · #10 (**permalink**) 13/11/2011, 10:18

@gazaposa

Java no es lo mismo que JavaScript, si tampoco podés usar JavaScript, sencillamente no se puede, y bueno hubiera sido que lo señales antes ya que las soluciones propuestas por mis compañeros involucran JavaScript.
Fijate que tan sólo el hecho de que al pulsar sobre una opción de tu select provoque un evento, conlleva el uso de javascript.

Finalmente hay algo que aún me confunde, vos querés que las imágenes se vean en el desplagable, o que se carguen en un contenedor aparte?
Para lo segundo, ya te han propuesto soluciones válidas, para lo primero

http://www.marghoobsuleman.com/mywor...own/index.html

Y todo, necesita de JavaScript

Saludos

memoadian · #11 (**permalink**) 13/11/2011, 10:31

Ah ya entiendo isabel, bueno tampoco es que se auna gran cantidad de tiempo ahorrado, pero pues tienes razón.

tambine pensé en la cantidad de condicionales, pero como eran continentes pues no me preocupo, la idea era darle una mano, pero veo que anda muy pez.