Cara membuat mouseover dengan gambar

Mouse over berfungsi seperti hover, saat kursor diarahkan ke area link, dia akan menimbulkan efek menyala atau meredup tergantung si pembuatnya. berikut ini saya akan membuatkan contoh mouse over tanpa menggunakan css dan menggunakan 2 gambar untuk gambar inti dan gambar hover nya.

Fungsi dari hover ini adalah tidak lain untuk mempercantik tampilan website anda. Cekidot !!

Berikut adalah codenya :

<p>

<a href="#"><img alt="" onmouseout="this.src='/images/menu/1.jpg'" onmouseover="this.src='/images/menu/11.jpg';" src="/images/menu/1.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/2.jpg'" onmouseover="this.src='/images/menu/22.jpg';" src="/images/menu/2.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/3.jpg'" onmouseover="this.src='/images/menu/33.jpg';" src="/images/menu/3.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/4.jpg'" onmouseover="this.src='/images/menu/44.jpg';" src="/images/menu/4.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/5.jpg'" onmouseover="this.src='/images/menu/55.jpg';" src="/images/menu/5.jpg" /></a>

</p>

Note :

• images/menu/1.jpg --> adalah gambar inti
• images/menu/11.jpg --> adalah gambar untuk hover nya

Contoh gambar inti :

Contoh gambar untuk hover :

Contoh untuk yang sudah jadi seperti dibawah ini :

Selamat mencoba, anda bisa menggunakan modul custom html advance.