06 Februari 2011

Imej Rollover

Tiada ulasan:
 




Sila lihat Demo
Penerangan:Tutorial yang mudah ini akan menerangkan bagaimana untuk membuat sebuah kotak dengan gambar yang apabila kita gerakkan mouse akan menunjukkan sebuah perkataan seperti mana di dalam demo.

1.Log in ke Blogger Dashboard--->Design/Layout--->Edit HTML

2.Cari kod ]]></b:skin>

3.Copy dan paste kod dibawah ni SEBELUM/DI ATAS kod ]]></b:skin>

<style type='text/css'>
*{ padding:0; margin:0;} body{ font:100% normal Arial, Helvetica, sans-serif;}

.rollover_img { width: 280px; height: 150px; background-image: url(
http://1.bp.blogspot.com/_P7J-V68xQZ4/TU5r_19O8sI/AAAAAAAAEJo/TQcHA6nYdtk/s1600/Tree-tree-nature-0094aa4db7_big.jpg); background-position: top; -moz-border-radius:10px; -webkit-border-radius:10px; border:10px solid #ccc; font:13px normal Arial, Helvetica, sans-serif; line-height:18px; float:left; margin:0 10px 10px 0; }
.rollover_img a { color: #fff; width: 280px; height: 150px; display: block; text-decoration: none; }

.rollover_img a:hover { background:#000; opacity:.60; filter:alpha(opacity=60); }

.rollover_img a span { display: none; width: 280px; padding:5px; }

.rollover_img a:hover span { display: block; }

</style>

*korang boleh ubah kod merah dengan kod gambar yang korang nak

4.Save template

Ok,sekarang apabila korang nak buat imej rollover ni semasa di edit pos/HTML/Javascript,tulis macam ni:

<div class="rollover_img">
<a title="Demo" href="#"> <span>You see nothing but I see something.Nothing I see is something you saw.Nothing is everything. </span> </a></div>

Kod pink hanya sekadar tajuk,nak tulis boleh tak tulis pun boleh.Kod ungu adalah apa yang korang nak tulis.Kod hijau adalah yang terpenting sekali,jangan tersalah tulis



Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger