Beranda  ›  Blogger tricks  ›  HTML and CSS  ›  Posts  ›  Widget

Create Rollover image Effect


Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding
2. Tidak Tahu Computer Programming
3. Tidak Paham Bahasa Pemrograman Android
4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...
Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan
2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan
3. Susun blok-blok kode programnya, dan
4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?
Mudah kok, karena sudah hadir untuk Anda Di Sini :


Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 
The Rollover effect is one that swap an image object with another image object when mouse hover on image and revert those images when mouse out from image.Rollover images are preloaded images when loading the web page.This ensure that rollover images loads quickly.

Demo:- Hover on image to see the rollover image effect.




.......................................................................................................................................

Making Rollover Effect Image

.......................................................................................................................................

The onMouseOver and onMouseOut attributes are used for creating rollover image effect.You just need to paste below HTML code where rollover image effect plays.

 <a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE " onmouseover="this.src='URL OF THE SECOND IMAGE '" onmouseout="this.src='URL OF THE FIRST IMAGE '" /></a>


  • Replace URL ADDRESS with your link address that you want sent user there.
  • Replace orange color text(both texts) with your main image URL which appears before you hover over it and after mouseout.
  • Replace the text with green color with your second image URL that will appear when you hover over it.

Set the Image width and Height of Images



This trick will be useful for you.In some occasions we can't find images with same width and height.When adding rollover image effect to those images,they're chaotic when hovering over them.So we need to set the height and width of both images in one time.We can do this task easily using CSS. Look at below code.

 <a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE " onmouseover="this.src='URL OF THE SECOND IMAGE '" onmouseout="this.src='URL OF THE FIRST IMAGE '" style="height: 350px !important; width: 350px !important;" /></a>
Replace above 350px with the height and width of your images.

Useful Tut Now:- How to Adjust sidebar width from simple few steps

.....................................................................................................................................

Add Rollover Image Effect to Blogger

.....................................................................................................................................

Now you know how to code for making rollover image effect.So you just need to implement the code on your blog.If you need to add rollover image effect on your blog's sidebar,follow below steps.

  1. Sign in to your Blogger account.
  2. Go to Dashboard >> Layout and click on "Add a Gadget" link.
  3. Select on "HTML/JavaScript" page element from the pop up window and paste above code for rollover image effect.Make sure you have made above customization precisely.
  4. Finally save your "HTML/JavaScript".
  5. You're done.
Also you can add rollover image effect inside your post by going to New post --> Switch to HTML mode and paste the code where rollover effect appears.

That's all.Enjoy :)

Pengelola Blog : ABDUL WAHAB

Judul : Create Rollover image Effect
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Create Rollover image Effect
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
http://kejutaninternet.blogspot.com/2013/07/create-rollover-image-effect.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait

Next
« Prev Post
Previous
Next Post »