Πολλές φορές είναι χρήσιμο, κάνοντας κλικ με το ποντίκι σε διάφορα σημεία μιας εικόνας, να πραγματοποιούμε συνδέσεις σε άλλες εικόνες, ιστοσελίδες κλπ. Για παράδειγμα, μπορούμε να έχουμε σε μια εικόνα ένα μικρό χάρτη και με το κλίκ του ποντικιού σε διάφορα σημεία του να εμφανίζουμε λεπτομερέστερους χάρτες. Ή, ακόμα, έχοντας την εικόνα μιας μηχανής, κάνοντας κλικ σε διάφορα σημεία της να πηγαίνουμε σε ιστοσελίδες που περιγράφουν τα σημεία αυτά.
Η δημιουργία ενός τέτοιου χάρτη, όπως λέγεται, γίνεται με δύο "κινήσεις":
1) με τη προσθήκη του ορίσματος USEMAP="..." στον κωδικό που εισάγει
την εικόνα, δηλαδή <IMG SRC="..." USEMAP="#...">. Οι ...
στο SRC αντιστοιχούν στο όνομα του αρχείου που περιέχει την εικόνα ενώ στο
USEMAP αντιστοιχούν στο όνομα του "χάρτη".
2) Ανάμεσα στους κωδικούς <MAP> και </MAP> περιγράφουμε
ακριβώς τις περιοχές της εικόνας και τις συνδέσεις που επιθυμούμε (συνηθίζεται
το τμήμα αυτό να εμφανίζεται στο τέλος το αρχείου html).
Οι περιοχές που μπορούμε να ορίσουμε μπορούν να έχουν σχήμα ορθογωνίου (rect), κύκλου
(circle) ή πολυγώνου (poly). Ο προσδιορισμός του
Tα στοιχεία αυτά δίνονατι σε pixels και μπορούν να βρεθούν χρησιμοποιώντας
ένα από τα πολλά λογισμικά επεξεργασίας εικόνων όπου κουνόντας το ποντίκι μπορείτε
να διαβάσετε τις συντεταγμένες κάθε σημείου της εικόνας (ένας δημοφιλής επεξεργαστής
χαρτών εικόνων είναι ο Mapedit που μπορείτε να τον βρείτε στη διεύθυνση
www.boutell.com/mapedit, αλλά και τα πιο απλά
προγράμματα επεξεργασίας εικόνας που δίνονται με τα λειτουργικά συστήματα σας
δίνουν την πληροφορία αυτή). Η δομή αυτών των εντολών είναι:
<MAP NAME="...">
<AREA SHAPE="..." COORDS="..." HREF="...">
<AREA SHAPE="..." COORDS="..." HREF="...">
.........................................
</MAP>
όπου οι ... στο NAME αντιστοιχούν, όπως ήδη αναφέραμε, στό όνομα του χάρτη,
στο SHAPE συμπληρώνουμε το σχήμα της περιοχής (rect, circle ή poly), στο
COORDS βάζουμε τις συντεταγμένες που καθορίζουν το σχήμα και τέλος στο
HREF συμπληρώνουμε τη διεύθυνση της ιστοσελίδας που θέλουμε να οδηγηθούμε πατώντας
με το ποντίκι στην συγκεκριμένη περιοχή. Ας προχωρήσουμε με ένα παράδειγμα.
Ο παγκόσμιος χάρτης που βλέπετε πιο πάνω είναι μια εικόνα όπου έχουμε ορίσει ένα "χάρτη": κάνοντας κλικ με το ποντίκι
σε μια ήπειρο οδηγούμαστε σε μια νέα εικόνα όπου βλέπουμε την ήπειρο που διαλέξαμε. Θα μπορούσαμε
να κάνουμε σύνδεση σε άλλο αρχείο html, σε άλλο σημείο της ίδιας της σελίδας ή ακόμα σε κάποια
άλλη διεύθυνση του διαδικτύου. Η εικόνα παραπάνω μπήκε με την γνωστή εντολή και τη χρήση του ορίσματος
USEMAP="#worldmap" όπου worldmap είναι το όνομα που δίνουμε στον "χάρτη" που
ορίζεται παρακάτω:
<img src="worldmap.jpg" align="center" usemap="#worldmap" border="0">
Ο κώδικας του "χάρτη" που δημιουργήσαμε είναι ο εξής:
<map name="worldmap">
<area shape="poly" coords="100,166,90,202,116,246,125,294,143,322,161,325,
149,296,186,241,195,204,137,158,118,154" href="south_america.jpg">
<area shape="circle" coords="504,254,51" href="australia.jpg">
<area shape="poly" coords="227,102,199,141,214,178,254,185,258,228,272,269,
294,267,328,251,340,216,321,199,347,166,337,156,325,161,301,115,277,110,
275,114,261,107,260,102" href="africa.jpg">
<area shape="rect" coords="33,92,143,155" href="central_america.jpg">
<area shape="rect" coords="9,5,183,91" href="north_america.jpg">
<area shape="poly" coords="232,33,221,64,222,102,264,102,290,109,292,101,287,
93,314,72,314,35,300,29,282,20" href="europe.jpg">
<area shape="poly" coords="313,3,313,72,287,91,325,157,344,154,359,133,375,
138,392,173,467,214,502,199,544,219,506,11,412,1" href="asia.jpg">
</map>
Ο ορισμός του χάρτη αυτού αντιστοιχεί στον παρακάτω "χωρισμό" των ηπείρων:
Εδώ μπορείτε να δείτε σε ξεχωριστό παράθυρο του αναγνώστη ιστοσελίδων το html αρχείo που περιέχει το ένθετο πλαίσιο όπου καλείται το δεύτερο html αρχείο που περιέχει την εικόνα με καθορισμένο τον "χάρτη".