(Update) Cara Buat Gambar Transparent dengan Mouseover Effect | Miss Durian Runtuh

Dec 25, 2010

(Update) Cara Buat Gambar Transparent dengan Mouseover Effect

Salam. Tutorial ni memang dah lama aku cari, baru hari ni terjumpa sebabkan baru nak Google. Cam mana tu. HA HA. Okey, tutorial ni ajar macam mana nak buat efek transparent pada gambar bila mana korang melayangkan mouse pada gambar itu. Nama pon mouseover. Cube korang layang kan mouse korang kat gambar di bawah. Opps, gambar ni Nabilah bagi masa birthday aku. Hihi. Tag kat Facebook. Time kasih Nabilah. :) Kiranya, dengan efek transparent ni, macam magic la. Dari redup ke terang & sebaliknya.

 
 Kod HTML bagi menukar gambar dari redup ke terang :
<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Tukar URL gambar dengan URL gambar korang.


Kod HTML bagi menukar gambar dari terang ke redup :
<img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>
Tukar URL gambar dengan URL gambar korang.
Okey, kod ni guna la kalau nak buat bagi sesetengah gambar sahaja. Di dalam entri atau sidebar korang. Tetapi jika nak semua gambar dalam post korang bertukar, boleh guna kod di bawah.

Kod HTML bagi tukar gambar redup ke terang :
.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
 Kod HTML bagi tukar gambar terang ke redup :
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
Okey, bagi kod untuk buat SEMUA gambar dalam post bertukar transparent bila mouseover, copy + paste salah satu kod di atas ni SEBELUM/DI ATAS kod ]]></b:skin>

p/s : Sebelum ni aku tersilap tulis. Aku tulis letak code DI BAWAH ]]></b:skin> tapi sebenarnya SEBELUM/ DI ATAS ]]></b:skin> .Sorry :)

Sumber : Sodiycxacun (Blog Bahasa Indonesia)
signature


17 Flowers:

NIA said... Reply Comment

thankssssssssssssssssssss nazirah!eh nazirah boleh ajar macam mana nak buat gambar yang background transparent tak?^____^

♛ Kerani Sekolah ♛ said... Reply Comment

izzati paham tak kite ajar tdi??hihiih

nabilah_2908 said... Reply Comment

bestnya...boleh try ni..thnks..!! ;)

jom ke APA KATA HATI pulak,
BILA TELEFON BRBUNYI

Anonymous said... Reply Comment

heyyy..dah berjaya..tq so much my dear

Mrs Nurul said... Reply Comment

COOL TUTORIAL BEB =) CANTIK GAK KALAU BUAT GAMBA CENI KAN

♛ Kerani Sekolah ♛ said... Reply Comment

@░♥silampu neon♥░

tau takpe neon.. :))

Cik Ina Do Do Cheng said... Reply Comment

Baguslah Nazirah buat tutorial kat sini, nanti bolehlah cilok.jangan marah ye

♛ Kerani Sekolah ♛ said... Reply Comment

@Cik Ina minat Do do Cheng

tak matah pon kak ina..hee

Scha Maddi said... Reply Comment

yeyeh jadi!! dr pg tadi cacha cari tuto ni... jumpe da.. thx miss {naz}

Cik Lysa said... Reply Comment

hey :) kalau utk blogskins cnea eh?

♛ Kerani Sekolah ♛ said... Reply Comment

@Lissa.

untuk blogskin,copy je kod post img { tu bawah body {

Arman said... Reply Comment

Miss Durian Runtuh hehe... Kamu lucu huny

♛ Kerani Sekolah ♛ said... Reply Comment

@Arman

lucu?name miss durian runtuh lucu ke?heheh :)