Menggunakan Image di Template

Trik Pertama: 

Memasang Image Langsung di dalam HTML
Pada trik ini langsung memasukkan image kedalam kode HTML, "image as content", contoh:

1. <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:

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

• Kode CSS:

1. /* repeated code per header */  
2. #logo, #logo span {  
3.  width: 300px; height: 75px;  
4.  }  
5. #logo a, #logo a span {  
6.  background-image: url(logo.jpg);  
7.  background-repeat: no-repeat;  
8. }  
9. #logo a:hover, #logo a:hover span {  
10.  background-image: url(logo2.jpg);  
11. }  
12.  /* This is what moves the text under the span */  
13. #logo a span { margin-bottom: -75px; }  
14. /* code for all styled headers */  
15. h1 a span {  
16.  display: block;  
17.  /* place the span on top */  
18.  position: relative;  
19.  z-index: 1;  
20. }   

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

1. <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

1. a.chirp  {  
2. background:url("logo_chirp.png") no-repeat left top;  
3. display:block;  
4. height:249px;  
5. width:324px;  
6. }  
7. a:hover.chirp  {  
8. background:url("logo_chirp.png") no-repeat left bottom;  
9. }  
10. a.chirp img {  
11. height:0;  
12. }    

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:

1. a.chirp img {  
2. height:0;  
3. }    

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 :)