Combinar select con imagenes...Ayudar por favor!!

todoalbo · #1 (**permalink**) 23/10/2007, 14:19

A diferencia de lo que todos piden, yo quiero pedir algo medio extraño:

Quero saber si existe algun codigo para al hacerle click a una imagen se seleccione un <option> de un <select>...la idea es que el value del option sea igual al src de la imagen...

Alguien sabe??

KarlanKas · #2 (**permalink**) 23/10/2007, 15:25

Nada más fácil:

<img src="http://www.dominio.com/pepe.jpg" onclick="document.forms['juan']['ernesto'].value=this.src" />
<img src="http://www.dominio.com/anselmo.jpg" onclick="document.forms['juan']['ernesto'].value=this.src" />

<form name="juan">
<select name="ernesto" >
<option value="*">Elige opción</option>
<option value="http://www.dominio.com/pepe.jpg">Poner Pepe</option>
<option value="http://www.dominio.com/anselmo.jpg">Poner Anselmo</option>

</select>
</form>

Un saludo!

KarlanKas · #3 (**permalink**) 23/10/2007, 15:33

Es importante que pongas la ruta absoluta (con dominio incluído) tanto en los option como en las imágenes.

todoalbo · #4 (**permalink**) 23/10/2007, 15:50

Mira...no me funciono lo que queria hacer realmente
Si entras a http://www.todoalbo.cl/2007/?sec=multimedia&sub=fotos vez que hay un select que cambia la imagen principal al elegir una del Select. El codigo para ello es

Cita:

function changeImage()
{
var list = document.getElementById('optionlist');
document.mainimage.src = list.options[list.selectedIndex].value;
}

Quiero hacer que pueda mostrar las thumbnails de las imagenes (cosa que se hacer con php) y al hacerles click se cambie la imagen y a la vez el numero en el Select. Adaptar el codigo no me funciono y pense "Quizas al conseguir un codigo para cambiar el select me resulta" que lo que te pedi a ti. Ese codigo funciona a la perfeccion y me cambia el Select, pero no cambia la imagen que es lo que yo esperaba. Como podre hacer eso?

Graciaas

KarlanKas · #5 (**permalink**) 24/10/2007, 01:00

Pues no hay problema. Sería algo así:

Código:

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<img src="http://www.dominio.com/pepe.jpg" onclick="document.forms['juan']['ernesto'].value=this.src;document.images['enGrande'].src=this.src" />
<img src="http://www.dominio.com/anselmo.jpg" onclick="document.forms['juan']['ernesto'].value=this.src;document.images['enGrande'].src=this.src" />

<form name="juan">
<select name="ernesto" >
<option value="*">Elige opción</option>
<option value="http://www.dominio.com/pepe.jpg">Poner Pepe</option>
<option value="http://www.dominio.com/anselmo.jpg">Poner Anselmo</option>

</select>
</form>
<img src="nada.jpg" name="enGrande" />

</body>
</html>

siendo la imagen enGrande el sitio donde pongas las imágenes en grande. Y si quieres que el archivo origen sea otro porque tiene más resolución puedes poner, por ejemplo:

document.images['enGrande'].src=this.src.replace('.jpg','_grande.jpg');

en vez de:

document.images['enGrande'].src=this.src

suponiendo que las imágenes de más resolución sigan el patrón de nombre_grande.jpg

Espero que te sirva!

todoalbo · #6 (**permalink**) 24/10/2007, 06:45

Hola...Ahora estoy en la Universidad por lo que no lo puedo probar. Vuelvo como a las 15 horas de Chile a mi Casa, lo que son las 20 horas en España...jejeje...Ahi lo pruebo y te cuento!!

Muchas gracias.