Pada umumnya seseorang membuat
daftar pilihan dengan fasilitas html
standar, misalnya : kotak daftar atau dengan fasilitas tombol radio. Hal ini
memang memadai untuk membuat halaman web yang menarik. Namun jika anda ingin
membuat halaman web yang lebih menarik lagi, maka Anda dapat memakai image.
Dalam
script ini akan ditampilkan menu pilihan yang ditunjukkan oleh suatu image.
<html>
<script LANGUAGE="Javascript">
//Gambar yang ditampilkan pada saat mouse melewati teks
Image1="image_on.gif"
/Gambar yang ditampilkan pada saat mouse meninggalkan teks (gambar koaong sesuai latar belakang)
Image2="image_off.gif"
<!--fungsi untuk menukar image pada saat Mouse Over-->
function ImageOver(NamaImage)
{
NamaImage.src = Image1
}
<!--fungsi untuk menukar image pada saat Mouse Out-->
function ImageOut(NamaImage)
{
NamaImage.src = Image2
}
</script>
<h3>PILIH SALAH SATU LINK DI BAWAH INI</h3>
<p>
<img NAME="ImagePilihan1" SRC="Image_Off.gif" width="15" height="15" BORDER="0">
<a HREF="http://Pilihan1" onMouseOver="ImageOver(ImagePilihan1)" onMouseOut="ImageOut(ImagePilihan1)">
Pilihan 1</a><br>
<img NAME="ImagePilihan2" SRC="Image_Off.gif" width="15" height="15" BORDER="0">
<a HREF="http://Pilihan2" onMouseOver="ImageOver(ImagePilihan2)" onMouseOut="ImageOut(ImagePilihan2)">
Pilihan 2</a><br>
<img NAME="ImagePilihan3" SRC="Image_Off.gif" width="15" height="15" BORDER="0">
<a HREF="http://Pilihan3" onMouseOver="ImageOver(ImagePilihan3)" onMouseOut="ImageOut(ImagePilihan3)">
Pilihan 3</a><br>
<img NAME="ImagePilihan4" SRC="Image_Off.gif" width="15" height="15" BORDER="0">
<a HREF="http://Pilihan4" onMouseOver="ImageOver(ImagePilihan4)" onMouseOut="ImageOut(ImagePilihan4)">
Pilihan 4</a><br>
<img NAME="ImagePilihan5" SRC="Image_Off.gif" width="15" height="15" BORDER="0">
<a HREF="http://Pilihan5" onMouseOver="ImageOver(ImagePilihan5)" onMouseOut="ImageOut(ImagePilihan5)">
Pilihan 5</a>
</p>
</html>
Untuk mencoba script tersebut, Anda
harus mebuat dua image berukuran 15x15 piksel. Image pertama bisa berupa gambar
apa saja yang berfungsi untuk menunjukkan suatu pilihan. Sedangkan image kedua
merupakan image kosong, dengan latar belakang putih atau tergantung latar
belakang yang digunakan, yang berfungsi untuk menghapus image yang pertama.
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 komentar:
Posting Komentar