728x90 AdSpace

Latest News

06 Februari 2011

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



Imej Rollover
  • Blogger Comments
  • Facebook Comments

0 ulasan:

Catat Ulasan

Top