3 Trik Menggunakan Image di Template

Disini ada 3 trik bagaimana menggunakan image di template atau juga menutup atau meniban text dengan sebuah image. Misal kita akan menggunakan image pada judul blog, bagaimana caranya agar ketika 'disable image' ataupun 'disable CSS' nya, informasi dari image tersebut tidak hilang. Minimal dari 3 trik berikut, kita dapat memutuskan trik mana yang sesuai untuk kita gunakan.

Trik Pertama: Memasang Image Langsung di dalam HTML

Pada trik ini langsung memasukkan image kedalam kode HTML, "image as content", contoh:

<h1><a href="#"><img width="300" height="75" alt="Judul Blog Anda" src="logo.jpg" /></a></h1>

Apabila kita menggunakan trik ini, penggunaan alt menjadi penting. Nanti apabila fungsi image dimatikan (disable), text di dalam alt tersebut sebagai penggantinya untuk mendeskripsikan image tersebut.

Untuk penggunaan trik ini, image tersebut tidak bisa di :hover, karena fungsi hover lebih ke penggunaan CSS. Untuk trik kedua berikut dapat menggunakan hover karena mengunakan CSS.

Trik Kedua: Menggunakan CSS untuk Mengganti Text dengan Image

Trik ini menggunakan CSS untuk mengganti text dengan image ('image replacement') dan memfungsikan :hover pada image.

Contoh:
Kode HTML:

<h1 id="logo"><a href="#"><span></span>Judul Blog</a></h1>

Kode CSS:

/* repeated code per header */
#logo, #logo span {
 width: 300px; height: 75px;
 }
#logo a, #logo a span {
 background-image: url(logo.jpg);
 background-repeat: no-repeat;
}
#logo a:hover, #logo a:hover span {
 background-image: url(logo2.jpg);
}

 /* This is what moves the text under the span */
#logo a span { margin-bottom: -75px; }
/* code for all styled headers */
h1 a span {
 display: block;
 /* place the span on top */
 position: relative;
 z-index: 1;
}

Dengan trik ini apabila kita 'disable image', text yang sebelumnya ditiban akan muncul kembali. Penambahan tag span menjadi kunci dari teknik ini. Trik ini tampaknya lebih baik dibanding kita menggunakan trik CSS dengan menggunakan text-indent, untuk menyembunyikan text, sebab apabila 'disable image' textnya tersebut tidak terlihat.

Trik ini dikembangkan dari Accessible Header Images With CSS And XHTML di page kedua, sub judul Show us Your Text!. Untuk lebih lengkap anda dapat mempelajari di alamat tersebut.

Trik Ketiga: Menggunakan Image di HTML dan CSS Sekaligus

Trik ketiga ini saya peroleh dari situs Chrip. Di situs tersebut, memasang image sekaligus, baik itu di dalam HTML maupun di CSS. Perhatikan contoh penggunaan kode yang diterapkan pada situs tersebut untuk image pada judul blognya:

Kode HTML

<h1><a class="chirp" href="#"><img alt="Chirp - The Official Twitter Developer Conference. San Francisco, 14th &amp; 15th April 2010." src="logo_chirp_small.png"></a></h1>

Kode CSS

a.chirp  {
background:url("logo_chirp.png") no-repeat left top;
display:block;
height:249px;
width:324px;
}
a:hover.chirp  {
background:url("logo_chirp.png") no-repeat left bottom;
}
a.chirp img {
height:0;
}

Jika kita perhatikan kode diatas pada kode HTML ada sebuah image yang ditanam langsung dan menggunakan atribut alt sebagai deskripsi dari image tersebut. Kemudian pada kode CSS nya juga ada image, dan menggunakan teknik CSS Spites untuk fungsi :hover.

Dengan kode berikut:

a.chirp img {
height:0;
}

fungsi dari height:0; tersebut, untuk menyembunyikan image di dalam HTML, sehingga image di dalam CSS yang akan tampil.

Prinsip dari trik ketiga ini, tampilan sempurna image dibrowser yaitu pada image di CSS nya. tapi apabila kita 'disable image', maka text didalam alt tersebut sebagai pengganti informasinya, dan apabila kita 'disable CSS' nya maka image di dalam kode HTML yang tampak.

Penutup

Lihat demo dari 3 Trik Menggunakan Image di Template. Silahkan anda mencoba 'disable image' atau 'disable CSS' untuk melihat hasilnya.

Dari ketiga trik tersebut silahkan memilih, yang menurut anda lebih tepat, atau anda memiliki trik sendiri yang lebih baik? kalau ada share yah :)

Posted in: CSS / HTML