Ide dasarnya adalah membuat setiap foto karakter street fighter IV diatas menjadi link ke halaman masing-masing. Kita bisa melakukannya dengan cara yang mudah atau cara yang rumit hehe..
Cara yang mudah: Potong-potong gambar diatas lalu susun dan masukkan dalam tabel, baru masing-masing potongan gambar dikasih link. Mudah tho, enak tho, whahaha..
Trus kenapa mesti melakukan dengan cara yang rumit? Kenapa mesti membuat image map? Pertimbangkan hal berikut:
- Semakin banyak gambar yang diloading berarti semakin banyak HTTP Request (semakin lambat pula loading halaman kita), dan gambar diatas mesti dipotong menjadi puluhan gambar, artinya puluhan HTTP Request bisa kita hemat bila kita lakukan image mapping.
- Setiap gambar memiliki tabel warna dalam file-nya, puluhan potongan gambar akan memerlukan puluhan tabel warna yang berulang padahal dengan 1 gambar maka ukuran file bisa diperkecil karena cuma memakai 1 tabel warna, atau paling tidak bisa sama besarnya dengan gabungan seluruh potongan gambar tersebut.
- Ilmu kita bertambah, ini yang paling penting ;)
Sekarang kita buat kode HTML yang diperlukan
<div align="center"> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>
Tag <div> kita gunakan untuk membungkus kode agar gambar berada ditengah, sementara pada tag <img /> kita melihat usemap="#mapFighter" yang merupakan nama map yang akan kita buat
Sekarang mari kita buat image map -nya yang akan diberi nama mapFighter seperti yang kita lihat pada kode dibawah:
<div align="center"> <map name="mapFighter"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>
Dalam image map ini kita akan membuat area berbentuk persegi panjang. Perhatikan kode berikut:
<div align="center"> <map name="mapFighter"> <area href="http://sexyclimate.blogspot.com/2009/05/fei-long.html" alt="fei-long" title="fei-long" shape="RECT" coords="0,0,100,80"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>
Kode yang mesti kita perhatikan adalah shape="RECT" coords="0,0,100,80", menandakan persegi panjang (RECT) dengan ukuran piksel-nya = horisontal 100 dan vertikal 80 ; dihitung dari sudut kiri atas gambar (0,0) sehingga didapat coords="0,0,100,80"
Bagaimana menentukan koodinat gambar yang ditengah? Misalkan gambar kang mas Guile.
<div align="center"> <map name="mapFighter"> <area href="http://sexyclimate.blogspot.com/2009/05/fei-long.html" alt="fei-long" title="fei-long" shape="RECT" coords="0,0,100,80"> <area href="http://sexyclimate.blogspot.com/2009/05/guile.html" alt="Guile" title="Guile" shape="RECT" coords="200,160,300,240"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>
ukuran persegi panjang kita tetap 100 x 80 pixel tetapi dengan titik awal yang berbeda, disini sudut kiri atas persegi panjang kita adalah titik 200px,160px sehingga sudut kanan bawahnya menjadi (200px+100px=300px),(160px+80px=240px). Kita dapatkan angka coords="200,160,300,240"
Berikut kode html lengkapnya:
<div align="center"> <map name="mapFighter"> <area href="http://sexyclimate.blogspot.com/2009/05/fei-long.html" alt="fei-long" title="fei-long" shape="RECT" coords="0,0,100,80"> <area href="http://sexyclimate.blogspot.com/2009/05/cammy.html" alt="Cammy" title="Cammy" shape="RECT" coords="100,0,200,80"> <area href="http://sexyclimate.blogspot.com/2009/05/akuma.html" alt="Akuma" title="Akuma" shape="RECT" coords="200,0,300,80"> <area href="http://sexyclimate.blogspot.com/2009/06/gouken.html" alt="Gouken" title="Gouken" shape="RECT" coords="300,0,400,80"> <area href="http://sexyclimate.blogspot.com/2009/05/dhalsim.html" alt="Dhalsim" title="Dhalsim" shape="RECT" coords="0,80,100,160"> <area href="http://sexyclimate.blogspot.com/2009/05/blanka.html" alt="Blanka" title="Blanka" shape="RECT" coords="100,80,200,160"> <area href="http://sexyclimate.blogspot.com/2009/05/chun-li.html" alt="Chun-Li" title="Chun-Li" shape="RECT" coords="200,80,300,160"> <area href="http://sexyclimate.blogspot.com/2009/05/ryu.html" alt="Ryu" title="Ryu" shape="RECT" coords="300,80,400,160"> <area href="http://sexyclimate.blogspot.com/2009/05/edmund-honda.html" alt="Edmund Honda" title="Edmund Honda" shape="RECT" coords="0,160,100,240"> <area href="http://sexyclimate.blogspot.com/2009/05/zangief.html" alt="Zangief" title="Zangief" shape="RECT" coords="100,160,200,240"> <area href="http://sexyclimate.blogspot.com/2009/05/guile.html" alt="Guile" title="Guile" shape="RECT" coords="200,160,300,240"> <area href="http://sexyclimate.blogspot.com/2009/05/ken-masters.html" alt="Ken Master" title="Ken Master" shape="RECT" coords="300,160,400,240"> <area href="http://sexyclimate.blogspot.com/2009/06/seth.html" alt="Seth" title="Seth" shape="RECT" coords="0,240,400,320"> <area href="http://sexyclimate.blogspot.com/2009/05/m-bison.html" alt="M. Bison" title="M. Bison" shape="RECT" coords="0,320,100,400"> <area href="http://sexyclimate.blogspot.com/2009/05/sagat.html" alt="Sagat" title="Sagat" shape="RECT" coords="100,320,200,400"> <area href="http://sexyclimate.blogspot.com/2009/05/vega.html" alt="Vega" title="Vega" shape="RECT" coords="200,320,300,400"> <area href="http://sexyclimate.blogspot.com/2009/05/balrog.html" alt="Balrog" title="Balrog" shape="RECT" coords="300,320,400,400"> <area href="http://sexyclimate.blogspot.com/2009/05/abel.html" alt="Abel" title="Abel" shape="RECT" coords="0,400,100,480"> <area href="http://sexyclimate.blogspot.com/2009/05/crimson-viper.html" alt="Crimson Viper" title="Crimson Viper" shape="RECT" coords="100,400,200,480"> <area href="http://sexyclimate.blogspot.com/2009/05/rufus.html" alt="Rufus" title="Rufus" shape="RECT" coords="200,400,300,480"> <area href="http://sexyclimate.blogspot.com/2009/05/el-fuerte.html" alt="El-Fuerte" title="El-Fuerte" shape="RECT" coords="300,400,400,480"> <area href="http://sexyclimate.blogspot.com/2009/06/sakura.html" alt="Sakura" title="Sakura" shape="RECT" coords="0,480,100,560"> <area href="http://sexyclimate.blogspot.com/2009/06/rose.html" alt="Rose" title="Rose" shape="RECT" coords="100,480,200,560"> <area href="http://sexyclimate.blogspot.com/2009/05/dan-hibiki.html" alt="Dan Hibiki" title="Dan Hibiki" shape="RECT" coords="200,480,300,560"> <area href="http://sexyclimate.blogspot.com/2009/05/gen.html" alt="Gen" title="Gen" shape="RECT" coords="300,480,400,560"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>
Silahkan kunjungi Street Fighter IV untuk melihat hasil yang sudah jadi
