Intercambiar Imagenes usando Select Menu/LIst

baluart22 Abril 2005 - 12:00am 7 comentarios
Enviar por Email Imprimir

CommunityMX hace un par de semanas ha publicado un tutorial sobre como rotar imagenes con un Select List/Menu, sin embargo estan cobrando una modica cantidad por leerlo. Pues aquí, nosotros también vamos a mostrar el mismo resultado, aunque tal vés no con el mismo procedimiento.

Siguiendo el ejemplo de esa web, vamos a publicar dos artículos referente a este tema, el primero, en donde haremos uso de una página estática, es decir, una página html en donde el diseño y la información no necesitan de ninguna interacción con alguna base de datos.

Y el segundo en donde si consideraremos el dinamismo de una página PHP y la base de datos MySQL para permitir el intercambio de imágenes de una manera mucho más dinámica.

Y el segundo en donde si consideraremos el dinamismo de una página PHP y la base de datos MySQL para permitir el intercambio de imágenes de una manera mucho más dinámica.

Ver ejemplo

<html>
<head>
<title>Intercambiar Imagenes con Menu/List</title>
</head>
<body>
<img src="img/img0.JPG" width="128" height="96" border="0" name="Imagen">
<script>
var _img = new Array();
    _img[0] = new Image(); _img[0].src="img/img0.jpg";
    _img[1] = new Image(); _img[1].src="img/img1.jpg";
    _img[2] = new Image(); _img[2].src="img/img2.jpg";
    _img[3] = new Image(); _img[3].src="img/img3.jpg";
function cambiarA(_obj)
{
  if(!_obj)return;
  var _index = _obj.selectedIndex;
  if(!_index)return;
  var _item  = _obj[_index].value;
  if(!_item)return;
  if(_item<0 || _item >=_img.length)return;
  document.images["Imagen"].src=_img[_item].src;
}
</script>

<form method="get">
    <select onchange="cambiarA(this)">
      <option value="">Seleccionar Imagen</option>
      <option value="0">Imagen 1</option>
      <option value="1">Imagen 2</option>
      <option value="2">Imagen 3</option>
      <option value="3">Imagen 4</option>
    </select>
</form>

Vamos ha empezar creando un JavaScript que se encargue del intercambio de las imagenes.

  • Creamos un array y lo instanciamos a una variable. El array contendra la ruta a la imagen acorde con el valor que se le asigne.
  • Creamos una funcion que se encarge de obtener los valores

Y para terminar creamos el Menu/Lista en Html, con sus respectivos valores.

Asi de simple, verdad... en unos días haremos lo mismo pero con PHP y MySQL.

Comentarios

Imagen de Daniel
Daniel

excelente, me sac

Imagen de emoticon

De momento no consegui hacerlo funcionar, lo queria utilizar en la administracion de una web para listar los emoticonos que no han sido añadidos a la base de datos, pero por alguna extraña razon no me funciono, ya lo intentare cuando tenga mas tiempo. De cualquier manera, gracias.

Imagen de Marc
Marc

Muy bueno el aporte es justo lo que estaba buscando!

Imagen de Gabi
Gabi

Muy bueno, me sirvió

Imagen de Gabi
Gabi

Muy bueno, gracias

Imagen de FIREMAN
FIREMAN

COMO HACER QUE MIS COMENTARIOS SE PUBLIQUEN EN LA PAG ME URGE SABER

Imagen de poluke
poluke

pana de verdad parece que me falta algo en el script si puedes revisarlo tu y decirme que tengo de malo por favor te lo agredesco te mando el codigo:

Intercambiar Imagenes con Menu/List

var _img = new Array();
_img[0] = new Image(); _img[0].src="http://polukeman.atwebpages.com/objetos/3.jpeg";
_img[1] = new Image(); _img[1].src="http://polukeman.atwebpages.com/objetos/2.jpeg";
_img[2] = new Image(); _img[2].src="http://polukeman.atwebpages.com/objetos/4.jpeg";
_img[3] = new Image(); _img[3].src="http://polukeman.atwebpages.com/objetos/6.jpeg";
function cambiarA(_obj)
{
if(!_obj)return;
var _index = _obj.selectedIndex;
if(!_index)return;
var _item = _obj[_index].value;
if(!_item)return;
if(_item<0 || _item >=_img.length)return;
document.images["image"].src=_img[_item].src;
}

Seleccionar Imagen
Imagen 1
Imagen 2
Imagen 3
Imagen 4

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más