Javascript - Mostrar distintas imagenes desde lista desplegable
Códigos Javascript
Segun la seleccion de una lista desplegale el script consigue mostrar una imagen distinta.
Tutores.org
Mostrando Codigo - Javascript
EXPLICACION
Debemos modificar:
"/tutores/images/mundo2.gif", "imagen2",
"/tutores/images/mundo3.gif","imagen3",
"/tutores/images/mundo4.gif","imagen4",
"/tutores/images/mundo5.gif","imagen5"
Con tantas uls de imagenes como deseemos, el script se encarga de hacer el resto.
CODIGO
# Codigo ofrecido por Tutores.org
- <HEAD>
- <SCRIPT LANGUAGE=JAVASCRIPT>
- var images = new Array(
- "/tutores/images/mundo2.gif" , "imagen2",
- "/tutores/images/mundo3.gif" , "imagen3",
- "/tutores/images/mundo4.gif" , "imagen4",
- "/tutores/images/mundo5.gif" , "imagen5"
- );
- </SCRIPT>
- </HEAD>
- <body>
- <P align="center"> </P>
- <P>Selecciona una imagen:</P>
- <SCRIPT LANGUAGE=JAVASCRIPT>
- function muestra_imagen()
- {
- var mi_nombre = document.f.s.options[document.f.s.selectedIndex].value;
- document.im.src = mi_nombre;
- }
- document.writeln('<IMG name="im" SRC="',images[0],'" BORDER=0>');
- document.writeln('<FORM name="f" method="POST">');
- document.writeln('<P><SELECT name ="s" onChange ="muestra_imagen()">');
- document.write('<OPTION selected value="',images[0],'"> ');
- document.writeln(images[1],' </OPTION>');
- for (i=2; i<IMAGEs.length; i+=2)
- document.writeln('<OPTION value="',images[i],'"> ',images[i+1],' </OPTION>');
- document.writeln('</SELECT></P></FORM>');
- </SCRIPT>
- </BODY>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Mostrar distintas imagenes desde lista desplegable" href="http://www.tutores.org/codigo/1456/" target="_blank">Mostrar distintas imagenes desde lista desplegable</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Mostrar distintas imagenes desde lista desplegable" href="http://www.tutores.org/codigo/1456/" target="_blank">Mostrar distintas imagenes desde lista desplegable</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
RafaelFM
10-12-2008 13:45:41
5
5
A mi, este codigo no me funciona muy bien pero, el siguiente, aunque no esta bien porque mueve el combo, funciona:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type language="javascript">
function cargar_imagen(imagen) {
var img = document.getElementById("myimage");
var img_dir = "img/";
if (img) {
img.src = img_dir + imagen;
}
}
</script>
<select name="imagenes" onchange="cargar_imagen(this.value)">
<option value="1.gif">Imagen 1</option>
<option value="2.png">Imagen 2</option>
<option value="3.png">Imagen 3</option>
<option value="4.png">Imagen 4</option>
</select>
<img alt src="imagen_default.jpg" id="myimage">
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type language="javascript">
function cargar_imagen(imagen) {
var img = document.getElementById("myimage");
var img_dir = "img/";
if (img) {
img.src = img_dir + imagen;
}
}
</script>
<select name="imagenes" onchange="cargar_imagen(this.value)">
<option value="1.gif">Imagen 1</option>
<option value="2.png">Imagen 2</option>
<option value="3.png">Imagen 3</option>
<option value="4.png">Imagen 4</option>
</select>
<img alt src="imagen_default.jpg" id="myimage">
</body>
</html>
INSERTAR COMENTARIO