Wednesday 10 April 2013

Cara Bikin Rollover Image

Baru baca tutorial bikin Rollover Image di sini.

Buat yang belum tahu, Rollover Image itu gambar yang kalo kita arahin kursor ke gambar itu bakal ada perubahan, bingung bahasanya, hehe. langsung ke contohnya aja deh :


Caranya cukup gampang.

1. Upload foto yang mau kalian gabungin. Kalo saya upload 2 foto ini ke Photobucket.


2. Copy code HTML ini

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

3. Copy - paste URL gambar yang pertama (2 kali) di sini:
4. Copy - Paste URL gambar kedua (1 kali) di sini:
5. Rollover image ini juga clickable. Kita bisa pasang alamat website yang mau kita arahkan. 
6. Kalo udah diedit, tinggal copy-paste deh di blog post, sidebar, atau dimanapun yang bisa dipasang kode HTML.

Selamat Mencoba. 





No comments:

Post a Comment