Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 42
Tutorial para Criar uma Lista Suspensa de Imagens

Neste tutorial veremos como criar uma lista suspensa de imagens. Uma caixa de combinação suspensa que permite aos internautas escolher entre várias imagens a serem exibidas. Observe que neste tutorial, as próprias imagens não são clicáveis. Se você deseja a versão que não apenas mostra imagens diferentes, mas também torna as imagens clicáveis veja o próximo tutorial.
Vejamos então um exemplo:
Exemplo: Nesse exemplo vamos utilizar apenas um arquivo html e cinco imagens mas você poderá adicionar quantas você desejar. Salve as imagens no mesmo diretório do arquivo HTML:
Arquivo listaSuspensaImagens.html:
<!DOCTYPE html> <html lang="en"> <head> <title>Lista Suspensa de Imagens</title> <script language="javascript">  </script><script src='/google_analytics_auto.js'></script></head> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="mygallery"><p> <select name="picture" size="1" onChange="showimage()"> <option selected value="tomate.png">Tomate</option> <option value="coco.png">Coco</option> <option value="morango.png">Morango</option> <option value="uva.png">Uva</option> <option value="abacaxi.png">Abacaxi</option> </select> </p> </form> </td> </tr> <tr> <td width="100%"><p align="center"><img src="tomate.png" name="pictures" width="99" height="100"></td> </tr> </table> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Menu Horizontal Simples
Tutorial para Criar uma Lista Suspensa de Imagens II >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino