Thursday, October 27, 2016

Penggunaan OnmouseOver Pada Button


Membuat sebuah website merupakan sebuah seni tersendiri khususnya bagi para programmer, bagaimana kita bisa membuat sebuah tampilan/interface yang menarik dan enak dipandang oleh pengunjung tanpa mengabaikan unsur-unsur lain yang sangat dibutuhkan misalnya keamanan data dan sebagainya.
Berikut di sampaikan cara membuat button yang menarik, yaitu pada saat buttonnya diklik maka akan berubah menjadi button yang lain. Biasanya yang sering diubah adalah warnanya.
caranya adalah sebagai berikut :

1. Siapkan 2 buah button yg berbeda, sebaiknya memiliki ukuran dan bentuk yang sama. misalnya seperti dibawah ini. button pertama namanya butto1.gif dan yang kedua button2.gif
2. Ketikkan syntak css berikut ini :
<style type="text/css">
     a.pic .image2{display:none}
     a.pic:hover .image1 {display:none}
     a.pic:hover .image2 {display:inline}
</style>

3. Cara menggunakannya adalah kita tinggal memanggil nama class yang ada discript diatas kedalam coding kita misalnya :

<a class="pic" href="https://www.bangkukuliah.com">
      <img class="image1" src="button1.gif" />
      <img class="image2" src="button2.gif" />
</a>

4. Pada saat mouse digerakkan ke button1.gif maka tampilannya akan berubah menjadi buuton2.gif dan pada saat dipilih maka akan membuka website yang kita tuju. Contohnya silahkan coba.

No comments:

Post a Comment