Image dan Image Map

Image

HTML, telah menyediakan fasilitas sederhana untuk membuat sebuah gambar dan Image Map.

Dengan gambar atau image akan membuat website lebih menarik dan enak di pandang, tapi perlu diperhatikan bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang dibutuhkan untuk mengakses website kita,sehingga pengunjung akan terlalu bosan untuk menunggu website tersebut.

Format Gambar

Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG. 

Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar.

<img src="ndutt.jpg" alt="Ndutt" width="100" height="100">

Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu alt, width dan height.
Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).

Image Map

Dengan menggunakan mapping gambar,kita dapat mengkreasikan menjadi sebuah halaman yang memuat peta sederhana. Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>. Tag MAP, terdiri dari beberapa pilihan, antara lain adalah untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) dan penandaan poligon. Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source. Sintaks map dan area adalah sebagai berikut.

<img src="planet.jpg" alt="Planet" usemap="#Planetmap" ></p>

<map name="Planetmap">

<area shape="rect" coords="2,2,192,456" href="Sun/sun.html" alt="Sun" target="blank">

<area shape="circ" coords="502,410,102" href="Mars/mars.html" alt="Mars" target="blank">

<area shape="poly" coords="545,542,581,522,595,543" href="Comet/comet.html" alt="Comet" target="blank">

</map>

Hasil :

Untuk lebih mudah menentukan titik koordinatnya gunakan Aplikasi Software DreamWeaver,dengan menggunakan dreamweaver dapat dengan mudah untuk memunculkan titik koordinatnya.
Pada pembuatan Image Map ini juga kita banyak membuat lembar kerja html baru sesuai dengan yang kita gunakan pada index yang diatas.