Chillarmy Trias: gambar

Wednesday, May 29, 2013

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.

Tuesday, May 28, 2013

Kode HTML/CSS untuk efek gambar terang 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:

style="opacity:0.75;filter:alpha(opacity=75)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.75;this.filters.alpha.opacity=75"

Contoh:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCB7Mcb-0G1TAntosF9Z_6yJ-ltNBr64DG4UjVIe4t3Om6sB8zpY5GlapyXUaT7aBZndD3y85jZcXnPTWDdD6NDgQ7l55IKjjMOAV1skhw56LGzDgqTNowknPuALy4a4KbrddkWaJGXbG/s1600/css.png"

style="opacity:0.75;filter:alpha(opacity=75)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.75;this.filters.alpha.opacity=75" />

Maka hasilnya akan tampak seperti gambar diatas. Namun cara diatas KHUSUS untuk background hitam. Untuk mengubahnya agar bisa kompatibel dengan background putih, pakailah kode HTML yang ini:

style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.9;this.filters.alpha.opacity=90"
onmouseout="this.style.opacity=0.9;this.filters.alpha.opacity=90"

Gimana caranya supaya semua gambar kena efek itu?

Untuk segala platform blog, khususnya Blogspot, jika kamu ingin menambahkan efek seperti diatas, dan diterapkan ke semua gambar yang ada di platform blog kamu, maka ikuti petunjuk berikut: Dasboard Blogspot -> Template -> Customize -> Advanced -> Add CSS. Kemudian tambahkan kode CSS berikut

Untuk background hitam

img
{
 opacity:.8;
 filter:alpha(opacity=80)
}

img:hover
{
 opacity:1;
 filter:alpha(opacity=100)
}

Untuk bacground putih

img
{
 opacity:1;
 filter:alpha(opacity=100)
}

img:hover
{
 opacity:.9;
 filter:alpha(opacity=90)
}

Efek terangnya ga stabil, gimana cara ngubahnya?
Kamu bisa melihat angka .9 dan 90, ubah angka tersebut misalnya jadi .85 dan 85, .8 dan 80, atau sesuai dengan seleramu. Kedua angka tersebut harus sama nilainya, jangan seperti .9 dan 80..

---