cambiar imagen con Select

kaninox · #1 (**permalink**) 17/05/2008, 22:49

Hi gente :/ tengo un duda tengo un Select y necesito que al seleccionar una opcion me muestre a su costado una imagen segun el valor del select....

no es mi caso pero voy a poner un ejemplito con vehiculos...

Código:

<select name="imagen">
<option>Seleccione</option>
<option value="01">Suzuki</option>
<option value="02">Chevrolet</option>
<option value="03">Peugeot</option>
<option value="04">Ferrari</option>
<option value="05">Pagani</option>
</select>

la idea es si no hay nada seleccionado no muestro nada si selecciono suzuki 01 cierto que haya un if que pregunte si $imagen == 01 y muestro la imagen de un suszuki por ejemplo y haci pero no se como capturar en la pagina sin recargar el valor se entiende....
pense que se podria a lo mejor con javascript tambien pero ver los datos con php tonces no supo donde poner el topic y no tengo idea que seria mejor saludos...

tfe · #2 (**permalink**) 18/05/2008, 06:15

Hola,

Los más facil seria nombrar las imagenes segun el "value" del select
Asi podrias tener un codigo sencillo como:

Cita:

kaninox · #3 (**permalink**) 19/05/2008, 06:29

vale algo te entiendo pero como hago `para :/ rescatar el valor en las imagenes
mmmmmm haber con document.getElementByIdobtengo el id cierto y con src=this.options[this.selectedIndex].value supongo lo copio pero como lo llevo a php? para consultar y mostrar de forma inmediata :/ en realidad que variable recoje.... hay donde estoy pegado....

#4 (**permalink**) 19/05/2008, 08:39

A ver, si la lista de imágenes no es grande puedes cargarla con PHP:

Código PHP:

  <?php 
    $imagenes=array("img1.jpg","sdf.png","foto3.gif"); 
?> 
<html> 
<head> 
    <script type="text/javascript"> 
    imagenes=new Array(); 
    <?php foreach ($imagenes as $i=>$v) echo "imagenes[$i]=\"$v\";\n" ?> 
    </script> 
</head> 
<body> 
    <select onchange="document.getElementById('elIdDeLaImagen').src=imagenes[parseInt(this.options[this.selectedIndex].value)]"> 
        <option value="0">Primera opción</option> 
        <option value="1">Segunda opción</option> 
        <option value="2">Tercera opción</option> 
    </select> 
    <img id="elIdDeLaImagen" alt="Motos"> 
</body> 
</html>

La línea

Código PHP:

  $imagenes=array("img1.jpg","sdf.png","foto3.gif");

debes sustituirla por tus datos (obtenidos de la BD o como quieras).

Si la lista es muy larga o, por lo que sea, no quieres pre-cargar todas las opciones en JavaScript, sino que quieres que cada vez que se elija una opción se busque el registro correspondiente en la BD, puedes usar AJAX o remote-scripting (personalmente prefiero esta última técnica). Si lo necesitas, dímelo y te sugiero algún código.

Espero que te sirva. Un abrazo,
Isra

GatorV · #5 (**permalink**) 19/05/2008, 08:49

Tema trasladado a JavaScript.

kaninox · #6 (**permalink**) 19/05/2008, 10:23

1.- gracias por mover el tema
2.- Siiii eso era man muchas gracias son solo 8 imagenes :) asi que me viene de perilla tu codigo
todo caso si lo tubiera que implementar con db ya tengo la base no me complica ya veo como va la cosa se agredece millones saludos..