Publicentral.com - promocion,paginas,web,tutores,publicentralPromocion de paginas webs
Mostrando Codigo - Javascript
Code

Javascript - Mostrar distintas imagenes desde lista desplegable

Códigos Javascript

Segun la seleccion de una lista desplegale el script consigue mostrar una imagen distinta.
Visitas: 30,170 - 15/12/2004 18:19:13
CODIGO SIN DEMOSTRACIONNO CONTIENE ARCHIVO DESCARGABLEComentario
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
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <HEAD>
  2. <SCRIPT LANGUAGE=JAVASCRIPT>
  3. var images = new Array(
  4. "/tutores/images/mundo2.gif" , "imagen2",
  5. "/tutores/images/mundo3.gif" , "imagen3",
  6. "/tutores/images/mundo4.gif" , "imagen4",
  7. "/tutores/images/mundo5.gif" , "imagen5"
  8. );
  9. </SCRIPT>
  10. </HEAD>
  11. <body>
  12. <P align="center"> </P>
  13. <P>Selecciona una imagen:</P>
  14. <SCRIPT LANGUAGE=JAVASCRIPT>
  15. function muestra_imagen()
  16. {
  17.     var mi_nombre = document.f.s.options[document.f.s.selectedIndex].value;
  18.     document.im.src = mi_nombre;
  19. }
  20. document.writeln('<IMG name="im" SRC="',images[0],'" BORDER=0>');
  21. document.writeln('<FORM name="f" method="POST">');
  22. document.writeln('<P><SELECT name ="s" onChange ="muestra_imagen()">');
  23. document.write('<OPTION selected value="',images[0],'"> ');
  24. document.writeln(images[1],' </OPTION>');
  25. for (i=2; i<IMAGEs.length; i+=2)
  26. document.writeln('<OPTION value="',images[i],'"> ',images[i+1],' </OPTION>');
  27. document.writeln('</SELECT></P></FORM>');
  28. </SCRIPT>
  29. </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 -->
COMENTARIOS
Comentario usuario
10-12-2008 13:45:41
1 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>
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.