Followers

17 Ogos 2010

Ogos 17, 2010 - No comments

Blog Tutorial:Hoverbox





Hai semua,hari ni,aku akan terangkan camna nak buat hoverbox,sangat mudah.Okla,sebelum mula,tentula korang nak tengok demo kan,hah,gerakkan mouse korang kat gambar koleksi emoticon dibawah,dan korang akan lihat,gambar ni automatik dizoomkan

Koleksi Emoticon Aideal Fitri


  • descriptiondescription

  • descriptiondescription

  • descriptiondescription

  • descriptiondescription

  • descriptiondescription

  • descriptiondescription





Okla,kalau berminat,korang cuma perlu copy kod ni dan letak sebelum kod ]]></b:skin>

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

Untuk memastikan takde masalah dngan browser IE,letakkan sekali kod ni
/* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
position: relative;
}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}

.hoverbox li
{
position: static;
}

Save template dah siap,dan kalau korang nak letak hoverbox ni kat gambar korang,korang kena buat camni waktu kat edit pos:

<ul class="hoverbox">
<a href="#"><img alt="description" src="url gambar korang" /><img alt="description" class="preview" src="url gambar korang" /></a>
</ul>

P/S:Aku harap korang paham,tugas korang cuma perlu copy and paste je,tak susahkan^^

0 ulasan:

Catat Ulasan