Followers

06 Februari 2011

Februari 06, 2011 - No comments

Imej Rollover





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



0 ulasan:

Catat Ulasan