Pernahkan anda mendesain sebuah web sendiri ??? (tanpa bantuan CMS)
Nah pasti disitu ada menu-nya kan ?
Bagaimana jika menu yang anda buat itu bukan berupa tulisan, melainkan dari sebuah gambar/image. Dan anda ingin ketika disorot menu itu berubah menjadi warna merah atau warna lainnya.
Tidak perlu sambil minum kopi ataupun makan snack, karena tidak membutuhkan waktu yang lama kok. Konsepnya sangat sederhana, sebenarnya gambar menu itu tidak pernah berganti warna, melainkan dengan menggunakan 2 gambar. Perhatikan contoh di gambar atas, arahkan pandangan anda ke menu WEBSTAT, ketika menu belum disorot (default tampilan) saya menggunakan gambar "stat.jpg", tetapi ketika menu WEBSTAT disorot maka saya mengganti gambarnya dengan sebuah gambar lain yang bernama "stat_link.jpg", dan pasti saya pake "JavaScript".
Jadi untuk contoh di atas saya memerlukan 6 file gambar, berikut adalah daftar filenya dan bisa didownload dengan gratis :
1. muka.jpg
2. muka_link.jpg
3. stat.jpg
4. stat_link.jpg
5. kat.jpg
6. kat_link.jpg
NB : Jangan lupa letakkan file-file gambar tersebut ke dalam 1 folder yang bernama images
Berikut tag html-nya :
<html>Jadi untuk contoh di atas saya memerlukan 6 file gambar, berikut adalah daftar filenya dan bisa didownload dengan gratis :
1. muka.jpg
2. muka_link.jpg
3. stat.jpg
4. stat_link.jpg
5. kat.jpg
6. kat_link.jpg
NB : Jangan lupa letakkan file-file gambar tersebut ke dalam 1 folder yang bernama images
Berikut tag html-nya :
<head>
<title>Mengganti Gambar Menu Ketika Disorot</title>
</head>
<body bgcolor="#000000" text="#FFFF00">
<table width="35%" border="0">
<tr>
<td><a href="#">
<img src="images/muka.jpg" onMouseOver="this.src='images/muka_link.jpg';" onMouseOut="this.src='images/muka.jpg';">
</a></td>
<td> </td>
<td><a href="#">
<img src="images/stat.jpg" onMouseOver="this.src='images/stat_link.jpg';" onMouseOut="this.src='images/stat.jpg';">
</a></td>
<td> </td>
<td><a href="#">
<img src="images/kat.jpg" onMouseOver="this.src='images/kat_link.jpg';" onMouseOut="this.src='images/kat.jpg';">
</a></td>
</tr>
</table>
</body>
</html>
Download file lengkapnya di sini
0 komentar:
Posting Komentar