Setelah mempelajari uraian singkat tentang bagaimana mengatur tulisan dengan XHTML dan CSS, dalam artikel ini saya mencoba meberikan sedikit gambaran tentang keunggulan CSS lainnya, yaitu dalam hal manipulasi tampilan gambah pada halaman website. Penggunaan CSS memungkinkan untuk melakukan manipulasi serupa terhadap banyak gambar pada sebuah website hanya dengan menggunakan atribut yang sama.
Contoh Gambar
Gambar di bawah ini yang akan dimanipulasi tampilannya dengan trik CSS. Perhatikan bahwa gambar sudah tersimpan (ter-upload) pada server dengan URL:
http://preaxz.com/wp-content/uploads/2009/06/fzn600.png
Cropping: Menampilkan hanya sebagian dari gambar
Kadang kita hanya perlu untuk menampilkan bagian tertentu dari sebuah gambar, biasanya hal ini dengan mudah dilakukan dengan melakukan cropping menggunakan software image editor. Dengan CSS, hal ini bisa dilakukan dengan menggunakan atribut background seperti gambar berikut
Kode yang digunakan adalah sebagai berikut:
<div style="background-image: url('http://preaxz.com/wp-content/uploads/2009/06/fzn600.png'); background-position: 0 50%; background-repeat: no-repeat; width: 200px; height: 110px;"></div>
Penjelasan properties CSS:
background-image: untuk menunjukkan URL gambar yang akan ditampilkanbackground-position: untuk mendefinisikan bagian mana dari gambar yang akan ditampilkan yaitux% y%. X% adalah bagian horisontal pada gambar. Y% untuk bagian vertikal. Pada contoh di atas.0 50%berarti gambar ditampilkan dari bagian ujung kiri paling atas sampai dengan 50% bagian gambar.background-repeat: untuk menegaskan bahwa gambar hanya ditampilkan sekali pada layer (<div></div>) tersebut.- Atribut
widthdanheightdigunakan untuk memberikan nilai lebar dan tinggi layer yang digunakan untuk menampilkan gambar.
Magnifier: Memperbesar gambar
Browse (arahkan cursor) pada gambar kecil di bawah ini untuk melihat gambar dengan ukuran sebenarnya.
Untuk mendapatkan efek seperti itu, maka Anda harus menggunakan CSS. Berikut kode XHTML dan CSS yang digunakan:
Kode XHTML yang digunakan pada gambar di atar
<div id="imagover"> <a href="#" class="hover-image"> <img class="small" src="http://preaxz.com/wp-content/uploads/2009/06/fzn600.png" alt="" /> <img class="large" src="http://preaxz.com/wp-content/uploads/2009/06/fzn600.png" alt="" /></a> </div>
CSS pada stylesheet
#imagover {position:relative; top:0; left:0; width:150px; background-color:#ffffff; z-index:100; }
#imagover a.hover-image, #imagover a.hover-image:visited {display:block; text-decoration:none; top:0; left:0; width:150px; }
#imagover a.hover-image:hover {text-decoration:none; background-color:#ffffff; color:#000000;}
#imagover a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#imagover a.hover-image:hover .large {background: #ffffff; display:block; position:absolute; top:-143px; left:0; width:390px; height:225px; padding: 2px; border:1px solid #f0f0f0; }
#imagover:hover { width: 1000px; }
Masih banyak contoh, tips dan trik lain yang bisa dilakukan untuk memanipulasi tampilan gambar. Contoh di atas hanya sebagian kecil dan tidak mengekspos seni CSS secara keseluruhan. Silakan bereksperimen dan mencoba segala kemungkinan yang bisa dilakukan dengan CSS.
Keterangan
Untuk keperluan tutorial ini, CSS yang digunakan ditulis dalam artikel (embedded) sehingga menyebabkan halaman ini tidak XHTML Valid. CSS seharusnya ditulis dalam file tersendiri atau ditempatkan dalam document header yaitu di antara tag <head></head>
13 comments on "Manipulasi Tampilan Gambar dengan CSS"
btw, klo mau beli motor di atas! caranya gmana yah?
bro tadi ak barusan kirim email….
yo jadi bikin forum to ya…hehehehehhehe
akhir2 ini gi sibuk dengan offlineku bro……
jadi onlinenya gi mandul…hehehehhe
salam 1%
@4mb … thax, caranya klik google, search Yamaha FZ6N dealer .. trus pilih salah satu dealer untuk order online ..
@bs … salam 1% juga
ok deh ntar me respon
apik tenan magnifiernya cak, tapi aku ra mudheng blas
Masa sih mas stein ga ngerti? Kan tinggal kopas aja kalo mo nyobain …
wah makasih mas tipsnya, saya bookmark dulu.. eh mas kira2 apa berpengaruh sama loading?? denger2 banyak gambar bikin loading berat
@badoer .. secara prinsip, jika suatu halaman memuat data yang besar, maka loading semakin berat. Kalau halaman memuat banyak gambar, tentunya akan lebih berat jika dibanding memuat teks saja.
kalo gambar yang kecil (bener-bener) dijadiin thumbnail, memang berdimensi kecil, trus gambar hover-nya baru dimensi asli bisa kan ya, mas arie?
risikonya beban request bertambah, tapi dimensinya sesuai dengan yang mesti di-loading. bukan loading gambar kecil (karena CSS), tapi ukuran sebenarnya lebih besar. cmiiw
@dani. Bisa saja mas, misalkan ada dua gambar kecil dan besar, yang kecil ditampilkan dan yang besar pada hover, bisa dibuat begitu. Kalau gambar kecil yang dibesarkan jadinya akan blur
Great idea !!!!
Tehnik yang sama ketika membuat drop-down menu pake CSS, tul ga????
Betul sekali bro … cuma mainin hidden layer aja ..
iya ni bagus untuk script textnya…saya juga lagi belajar manipulasi css mas..sekarang banyak kontes seperti yang tulisan …di antaranya /review-komputer-berhadiah-laptop-atau-flashdisk-mau/
Tutorial yang menarik mas, tapi ngomong-ngomong aneh juga yah…baru kemarin saya baca-baca tentang pengaplikasian image zoom dengan menggunakan jquery dengan contoh gambar yang juga ‘motor keren’…disini saya mendapati topik yang sama, dengan sample gambar motor keren juga…
hmmm…apa jangan-jangan saya akan berjodoh dengan motor keren beneran yah