huh.. sudah terlalu lama saya tidak menyentuh web ini, jangankan untuk redesign web-nya untuk menambah sebuah cerita pun sulit.. *halah*

well.. kali ini saya mencoba untuk berbagi pengalaman membuat frame untuk sebuah gambar.. semoga dapat menjadi ilmu baru untuk kalian semua ya.. mohon maap jika ada yang pernah baca tips seperti ini di web lain.. saya tidak menconteknya kok.. hihihihi

langkah pertama: buatlah sebuah frame.. untuk kali ini saya membuat frame dengan round corner di sekelilingnya.. bagian dalam frame dijadikan area transparant.. ada dapat menggunakan file GIF atau PNG..

langkah kedua: siapkan kode css..
css untuk tempatnya:

1. #viewer {
2. cursor:pointer;
3. margin-bottom:10px;
4. margin-right:10px
5. position:relative;
6. width:250px;
7. }

cursor:pointer; dibutuhkan untuk merubah arrow menjadi pointer pada saat anda menghover box tersebut..
position:relative; dibutuhkan untuk menormalkan kembali posisi dari box..

css untuk memanggil gambar frame

1. #viewer .frame {
2. background:transparent url(imgs/frame_viewer.png) no-repeat scroll left top;
3. height:188px;
4. position:absolute;
5. width:250px;
6. }

untuk height dan width harap disesuaikan dengan height & width frame-nya.. pada contoh ini saya

terakhir adalah css untuk link-nya

1. #viewer a {
2. display:block;
3. height:188px;
4. text-align:center;
5. width:250px;
6. }

disini saya menggunakan text-align:center; supaya gambar yang dipanggil di dalam frame tersebut nantinya akan berada di tengah-tengah frame secara horisontal..

langkah ke 3:
mengaplikasikan ke dalam HTML

1. <div id="viewer">
2. <div class="frame"></div>
3. <a href="#"><img src="imgs/gambar.jpg" width="250" height="188" border="0" /></a>
4. </div>

hasil akhirnya kira-kira akan menjadi seperti dibawah ini:

tips: jika anda menggunakan PNG file untuk frame, untuk mencegah kekacauan layout anda di IE6, anda dapat menggunakan iepngfix.htc atau menggunakan css khusus untuk IE6:

1. * html #viewer .frame {
2. background:transparent url(imgs/blank.gif) repeat 0 0;cursor:pointer;
3. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='imgs/frame_viewer.png');
4. }

selamat mencoba ya..

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.