Bahagian-XI

Pemetaan Imej - I

 
Pemetaan Imej
Pemetaan imej adalah satu cara untuk mencanggihkan lagi hompej anda. Melalui pemetaan imej, apa yang anda lakukan ialah mendefinasikan satu kawasan kecil dalam satu imej grafik kepada satu jalinan. Cara ini merupakan salah satu cara yang agak susah sedikit, tetapi pulangannya lumayan.

Tetapi perlu diingatkan bahawa apabila anda menggunakan pemetaan imej untuk menu hompej anda, jika anda mahu menambah 2 atau 3 topik kemudiannya, maka anda perlu melukis imej lain dan mendefinasikan semula kawasan-kawasan yang dikehendaki. Berlainan jika anda menggunakan ikon-ikon atau button kerana jika anda mahu menambah 2 atau 3 topik lagi kemudian, maka anda hanya perlu menambahkan ikon-ikonnya sahaja.


Bagaimana?
Sebelum kita mulakan, baik anda lihat apa itu pemetaan imej. Di bawah ini, terdapat imej yang telah dipetakan. Jika anda menggerakkan tetikus ke bahagian-bahagian tertentu di dalam imej ini, anda boleh dapati bahawa kursor tetikus itu akan berubah. Jika anda mengklik pada bahagian tersebut maka anda akan di bawa ke jalinan yang telah ditetapkan oleh pemetaan imej tersebut. Terdapat 2 jenis pemetaan imej
  • Pemetaan berdasarkan pelayan
  • Pemetaan berdasarkan pelanggan

Di dalam tutorial ini kita, hanya akan mengikuti cara-cara pemetaan imej berdasarkan sebelah pelanggan.

Pemetaan imej terdiri dari 2 bahagian, iaitu bahagian peta, dan bahagian imej.

  • Bahagian Imej
    Imej yang akan digunakan dalam pemetaan.
  • Bahagian Peta
    Bahagian dimana anda membahagikan kawasan imej kepada beberapa bahagian. Dan setiap bahagian akan mempunyai jalinannya sendiri.

Jika anda perhatikan imej di bawah, ia sebenarnya cuma satu imej. Dan jika anda klik pada sebelah kiri atau sebelah kanan imej tersebut. Anda akan melompat ke laman yang telah ditetapkan.





html13b.gif


map(petaimej)
 
---------------------------------------
<head>
<map name="petaimej">
<area shape="rect" coords="37, 2, 73, 38" href="html2.htm">
<area shape="rect" coords="2, 2, 35, 38" href="htmlidx.htm">
<area shape="default" nohref>
</map>
</head>
---------------------------------------

Pada kebiasaanya peta untuk imej diletakkan antara tag <head>..</head>.

Jika anda perhatikan contoh kod di atas, tag <map>...</map> digunakan dan pada tag <map> itu dikenakan sifat name dan peta imej itu telah diberi nama "petaimej". Di antara tag <map>...</map> di letakkan tag <area>. Tag <area> ini akan menentukan kawasan-kawasan yang akan didefinasikan kepada jalinan. Terdapat beberapa sifat yang boleh dikenakan kepada tag <area> ini.

  • shape
    sifat shape ialah bentuk kepada kawasan tersebut terdapat 3 jenis bentuk yang boleh dikenalpasti iaitu
    • rect
    • circle
    • poly
    • default
      default bermaksud kawasan yang tidak didefinasikan oleh peta imej dan jika pengguna mengklik pada kawasan tersebut, maka ianya tidak memberi apa-apa kesan.
  • coords
    Koordinat kawasan yang terkandung olehnya. Nilai untuk sifat coords ini adalah dalam bentuk piksel. Perhatian, bahawa cara penetapan kawasan ini bergantung kepada nilai shape di atas.
    • rect - x1,y1,x2,y2
    • circle - x1,y1,jejari
    • poly - x1,y1,x2,y2,x3,y3....
  • href
    Tempat yang akan dituju jika kawasan itu di klik.

Perhatian, bahawa tag <area> tidak mempunyai penutup </area>. Dan perlu juga diberitahu bahawa sifat shape "circle" dan "poly" tidak disokong oleh Browser Mosaic.

Jika petanya sudah dibuat maka, untuk mengkaitkan peta dengan imej, caranya begini.

--------------------------------------------------
<img src="html13b.gif" usemap="#petaimej">
--------------------------------------------------

Sifat usemap digunakan pada tag <img> untuk mengkaitkan antara grafik dengan peta imej yang telah dibuat. Berdasarkan contoh di atas, nama yang telah diberi di peta imej iaitu "petaimej" digunakan pada tag <img>.


Tips dalam pemetaan imej
Oleh kerana cara untuk membuat peta memakan masa yang lama dan ianya begitu kompleks, maka terdapat beberapa perisian di pasaran yang boleh digunakan untuk membuat peta imej dengan cepat. Antaranya ialah, hotspot(shareware), webimage(shareware) dan mapedit(shareware), anda boleh dapatkannya di www.download.com. Perisian seperti ini membuat kod-kod koordinat yang kita perlukan di dalam pemetaan imej ini, jadi anda tidak perlu bersusah-payah mengira kedudukan piksel yang hendak dipetakan.
left btn right btn