Cara Membuat Jump Menu Pop Up

Hampir sama dengan postingan sebelumnya, yaitu cara membuat pop up image viewer. Kali ini medianya tidak lagi berupa link text, tetapi berupa jump menu.

Demo nya bisa Agan klik di sini. Coba Agan klik satu per satu.

Bagaimana sudah lihat ??

Agan bisa gunakan ini untuk memasang foto dagangan (jika punya dagangan), atau koleksi foto Award, atau kumpulan foto lainnya. Style ini tentunya memberikan daya tarik tersendiri.

Jika Agan tertarik, Agan cukup salin kode ini :

<SCRIPT language="JavaScript">

/*
Script posted and featured on JavaScript Kit
http://ketagihanbaca.blogspot.com/
*/

function display_image(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=350,height=465");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +
selectionname + "</FONT></B><HR>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC='" + selection + "'>");
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
</SCRIPT>

<FORM>
<select NAME="imagename" onChange="display_image(this.form)">
<option value="URL Foto 1" SELECTED>Judul 1
<option value="URL Foto 2">Judul 2
<option value="URL Foto 3">Judul 3
</select>
</FORM>
<div align="left">
<span style="font-family: arial; font-size: xx-small;">by </span><span style="font-size: xx-small;"><a href="http://ketagihanbaca.blogspot.com/">ketagihan baca</a></span></div>
</br>

Perhatikan :

Ganti tulisan URL Foto 1 - 3 dengan URL foto Agan.
Ganti tulisan Judul 1 - 3 dengan Judul nya.

Untuk menambah foto, Agan tinggal tambahkan kode berikut :

<option value="URL Foto 4">Judul 4

Pasang sebelum kode </select>

Selamat mencoba