Como mostrar una imagen desde una lista deslegable?

[pakillo]

Hola, primero que no se como explicarlo en el titulo lo que quiero hacer, veamos, tengo un div que cambia la imagen al presionar sobre una imagen pequeña, lo que quiero hacer ahora es que en lugar de usar imagenes pequeñas, se haga con una lista desplegable, esto es lo que tengo

Este es el div que muestra las imagenes

<div class="image">
<img id="largeImg" src="img/imagen1.png" width="350" height="350" style="opacity: 1;"> </div>
</div>

si lo hago con imagenes pequeñas si funciona, este es con una imagen pequeña

<li class="swatch selected">
<a href="img/imagen1.png" class="thumbnail">
<img src="img/thumb_imagen1.jpg">
</a>
</li>

Quisiera poder utilizar una lista asi

<select name="imagenes">
<option value="img/imagen1.png">Imagen 1</option>
<option value="img/imagen2.jpg">Imagen 2</option>
</select>

Y el codigo es este

<script type="text/javascript">
$('a.thumbnail').click(function(){
var src = $(this).attr('href');


if (src != $('img#largeImg').attr('src').replace(/\?(.*)/,'')){
$('img#largeImg').stop().animate({
opacity: '0'
}, function(){
$(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
}).load(function(){
$(this).stop().animate({
opacity: '1'
});
});
}

return false;
});
</script>

Con ese codigo solo funcionan las imagenes pequeñas, y quiero es utilizarlo como lista.

Saludos

[Dradi7]

si lo que quieres es realizar un select con imagenes puedes revisar este link

http://www.marghoobsuleman.com/mywor...cssSprite.html

[furoya]

Sí, lo de poner imágenes en las opciones no es totalmente compatible. Hay que simular el formato.

Pero me parece que el asunto pasa por el linkeado.

Aunque eso es muy simple. No sé dónde tenés el problema. Está en cualquier tutorial.
Y por aquí en el Foro también, aunque como es tan elemental, lo vas a encontrar integrado a otras consultas.

link dependiente de un select

Iframe con Javascript

Solamente tenés que hacer el escript que cambie la ruta de la imagen cuando cambiés la opción del selector.

Ahora creo más bien que tu problema es la configuración de una library (seguramente jquery), donde tenés una transición.
Pero resulta que éste es el Foro de javascript. Para esto te conviene preguntar en el sub-foro de Frameworks, que alli las conocen.
(Seguro acá también, pero no es el foro que corresponde.)

[pakillo]

Gracias Dradi7 pero no era eso lo que buscaba, lo que quería hacer es que dentro de un div mostrar la imagen según la opción del listado, adjunto una imagen para entenderlo mejor :)



Saludos

EDITADO
Conseguí hacer que cambie de esta forma

Div que muestra las imágenes

<div class="image">
<img id="largeImg" src="img/imagen1.png" width="350" height="350" style="opacity: 1;" name="imagen"> </div>
</div>

La lista para seleccionar

<form>
<select name="lista" size="1" onChange =" imagen.src=form.lista.options[form.lista.selectedIndex].value;">
<option value="img/imagen1.png">Imagen 1</option>
<option value="img/imagen2.jpg">Imagen 2</option>
</select>
</form>

Hasta ahí funciona bien, el problema es que no se como darle a la imagen un efecto fade porque cambia muy rápido la imagen.

[furoya]

¡Qué bien! ¡Otro poroto para mí!
Le acerté en la primera.

Aunque si es sólo eso, sigo sin entender cuál es tu problema. Es JS elemental : le ponés un id a la imagen original y cada vez que se dispare el onchange="" del <select> le tomás el nuevo value (que será la ruta de la nueva imagen) y se la pasás al src="" de la etiqueta <img> con getElementById().src.

Más simple no se puede.

Por eso me sigue pareciendo que tu problema real es la transición.
Que por lo que veo en el código, es aleatoria, según el número de la imagen.

Mmmm. Ahora sí dejé de entender.

¿Por qué existe ese src+'?'+Math.floor(Math.random()*(1000))?
(¿Tenés hasta la imagen 999?)


[edit]

Peeero!.

No vi tu edición.

Segundo poroto.

Te repito, si tu problema es el JQ, hay un Foro para eso. No es javascript.
Aunque el efecto se pueda hacer perfectamente con JS.
Y hasta con CSS.

[/edit]

[pakillo]

Es que mi problema es que se lo elemental de lo elemental jejeje, no me importa si esta hecho en jq o js solo necesito que me haga ese pequeño efecto, como digo en la parte editada conseguí hacerlo con ese código, mucho mas sencillo, pero no se como hacer que haga el efecto fade al cambiar de imagen, si es en js mejor para mi, pero soy casi nulo en esto.

Saludos.