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)"Tukar URL gambar dengan URL gambar korang.
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>
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}Kod HTML bagi tukar gambar terang ke redup :
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.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 :)
17 Flowers:
thankssssssssssssssssssss nazirah!eh nazirah boleh ajar macam mana nak buat gambar yang background transparent tak?^____^
izzati paham tak kite ajar tdi??hihiih
bestnya...boleh try ni..thnks..!! ;)
jom ke APA KATA HATI pulak,
BILA TELEFON BRBUNYI
@nabilah_2908
try le..best.. same2 :))
heyyy..dah berjaya..tq so much my dear
@kasihkuamiera
welcome ;))
best2 . . bley try neh
@apeyx
try la ;))
COOL TUTORIAL BEB =) CANTIK GAK KALAU BUAT GAMBA CENI KAN
@░♥silampu neon♥░
tau takpe neon.. :))
Baguslah Nazirah buat tutorial kat sini, nanti bolehlah cilok.jangan marah ye
@Cik Ina minat Do do Cheng
tak matah pon kak ina..hee
yeyeh jadi!! dr pg tadi cacha cari tuto ni... jumpe da.. thx miss {naz}
hey :) kalau utk blogskins cnea eh?
@Lissa.
untuk blogskin,copy je kod post img { tu bawah body {
Miss Durian Runtuh hehe... Kamu lucu huny
@Arman
lucu?name miss durian runtuh lucu ke?heheh :)
Post a Comment