Intercambiar Imágenes Dinámicamente con Dreamweaver

Ahora que hemos visto como rotar imágenes en una lista desplegable (menu/list) de manera estática, es hora de ver algo más interesante. En esta segunda parte, enseñamos como mostrar sus imágenes de manera dinámica con JavaScript, PHP y MySQL.

Ahora que hemos visto como rotar imágenes en una lista desplegable (menu/list) de manera estática, es hora de ver algo más interesante. En esta segunda parte, enseñamos como mostrar sus imágenes de manera dinámica con JavaScript, PHP y MySQL.

Empezamos creando nuestra base de datos mediante PpMyAdmin.

Luego, nuestra tabla con tres campos.

El primer campo “Id” de tipo TINYINT, autoincrement y llave primaria
El segundo y tercero, “Imagen” y “Nombre” con los siguientes valores.

“Imagen” contiene la ruta a la imagen desde la página que ejecuta el script de consulta.

Creamos un nuevo Sitio con Dreamweaver, apuntamos los Datos de la carpeta Local.

Los de la carpeta remota.

El modelo del servidor.

Ahora que ya creamos nuestro Sitio en Dreamweaver creamos una Página PHP, vamos a la ventana Base de Datos (Ctrl+Mayus+F10) y creamos la conexión.

Luego en la ventana Vinculaciones (Ctrl + F10) creamos nuestra consulta a la BD.

Luego, a insertar un formulario con del método “Get”.

Luego insertamos el menú desplegable (Lista/Menu), y la vinculamos con una fuente Dinámica.

El valor que vamos a transmitir es “Id” y la etiqueta que mostramos es  “Nombre”.

Ahora insertamos el código JavaScript que hace el efecto de manera estática.

Luego, vamos a reescribir el JavaScript con código PHP.

Luego, al array de Java lo modificamos y le añadimos el mismo bucle do/while creado en el formulario (copiar y pegar), debe de quedarnos de esta manera.

Finalmente, modificamos el select del formulario y le añadimos una opción inicial.

El resultado final, una lista desplegable dinámica, fácil de modificar a través de simples formularios.

 Descargar Lista_dinámica