Δημιουργία ενός χάρτη εικόνας

Μπορούμε να δημιουργήσουμε έναν χάρτη εικόνας με σκοπό να διαιρεί μία σελίδα σε διαφορετικές περιοχές, που η κάθε μία συνδέεται με μία διαφορετική σελίδα.

Προσθέτουμε την εικόνα που θέλουμε να χρησιμοποιήσουμε και της δίνουμε όνομα με την ιδιότητα USEMAP.

Χρησιμοποιούμε τους κωδικούς <MAP> με την ιδιότητα NAME  για να αρχίσουμε να ορίζουμε τις πληροφορίες για το χάρτη εικόνας και <AREA> για να καθορίσουμε τις πληροφορίες για κάθε περιοχή που πέλουμε να συμπεριλαμβάνει η εικόνα μας.

Επίσης χρησιμοποιούμε τις ιδιότητες:

SHAPE για να καθορίσουμε το σχήμα μίας περιοχής εικόνας. Με τιμές rect για ένα ορθογώνιο, circle για ένα κύκλο και poly για ένα πολύγωνο.

COORDS για να ορίσουμε τις συντεταγμένες μίας περιοχής εικόνας.

HREF για να καθορίσουμε τη διεύθυνση της σελίδας που θέλουμε να εμφανίζεται όταν οι χρήστες επιλέγουν μία περιοχή της εικόνας.

Για παράδειγμα:

<IMG SRC="animals.gif" USEMAP="#menumap">
<MAP AREA="menumap">
<AREA SHAPE="rect" COORDS="9,6,142,63"> HREF="cat.html">
<AREA SHAPE="rect" COORDS="143,6,274,63"> HREF="dog.html">
<AREA SHAPE="rect" COORDS="9,64,142,121"> HREF="bird.html">
<AREA SHAPE="rect" COORDS="143,64,274,121"> HREF="mouse.html">
</MAP>