Kode HTML untuk efek gambar besar/kecil saat diarahkan

Coba arahkan kursormu ke gambar tersebut.

Nampaknya ada yang berbeda?

Wah gimana caranya tuh?

Tambahkan kode HTML dibawah ini ke dalam tag img:

width="370" height="334" onmouseout="this.width=370;this.height=334" onmouseover="this.width=388;this.height=350"

Contoh:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCB7Mcb-0G1TAntosF9Z_6yJ-ltNBr64DG4UjVIe4t3Om6sB8zpY5GlapyXUaT7aBZndD3y85jZcXnPTWDdD6NDgQ7l55IKjjMOAV1skhw56LGzDgqTNowknPuALy4a4KbrddkWaJGXbG/s1600/css.png" width="370" height="334" onmouseout="this.width=370;this.height=334" onmouseover="this.width=388;this.height=350" />

Maka hasilnya akan tampak seperti gambar diatas. Namun kamu harus mengubah angka yang ada di dalam kode tersebut. this.width dan this.height yang ada di onmouseout adalah ukuran gambar sebelum kamu arahkan kursormu ke gambar tersebut, biasanya diisi dengan ukuran gambar yang aslinya. Sementara this.width dan this.height yang ada di onmouseover adalah ukuran gambar setelah kamu arahkan kursormu ke gambar tersebut, nilainya harus lebih besar/kecil dari onmouseout.

Jika di tag img kamu terdapat elemen width dan height (contoh: width="370" height="334"), maka samakan nilai di elemen tersebut dengan this.width dan this.height yang ada di onmouseout

---

Oke, sekian yang bisa Chilly share.

Kalau udah tau ya jangan bosen-bosen kasih tau yang lainnya.

Mau nulis komentar? [klik disini]
Artikel ini ditulis oleh Chillarmy sendiri. Cantumkan sumber apabila kamu mengcopynya.