Βασικά στοιχεία της HTML >Χάρτες

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

Η δημιουργία ενός τέτοιου χάρτη, όπως λέγεται, γίνεται με δύο "κινήσεις":
1) με τη προσθήκη του ορίσματος USEMAP="..." στον κωδικό που εισάγει την εικόνα, δηλαδή <IMG SRC="..." USEMAP="#...">. Οι ... στο SRC αντιστοιχούν στο όνομα του αρχείου που περιέχει την εικόνα ενώ στο USEMAP αντιστοιχούν στο όνομα του "χάρτη".
2) Ανάμεσα στους κωδικούς <MAP> και </MAP> περιγράφουμε ακριβώς τις περιοχές της εικόνας και τις συνδέσεις που επιθυμούμε (συνηθίζεται το τμήμα αυτό να εμφανίζεται στο τέλος το αρχείου html). Οι περιοχές που μπορούμε να ορίσουμε μπορούν να έχουν σχήμα ορθογωνίου (rect), κύκλου (circle) ή πολυγώνου (poly). Ο προσδιορισμός του

ορθογωνίου γίνεται από τις συντεταγμένες της πάνω αριστερής και κάτω δεξιάς γωνίας (a,b,c,d),
του κύκλου από τις συντεταγμένες του κέντρου του και την ακτίνα του (a,b,r)
και τέλος του πολυγώνου από τις συντεταγμένες κάθε κορυφής του (a,b,c,d,e,f,...).

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>

Ο ορισμός του χάρτη αυτού αντιστοιχεί στον παρακάτω "χωρισμό" των ηπείρων:

'Aσκηση 7: Πληκτρολογήστε τον κώδικα HTML ώστε στην αρχική σελίδα να εμφανίζεται ένα ένθετο πλαίσο όπου και θα καλείται ένα αρχείο html που θα περιέχει την εικόνα 1:

Στο αρχείο που περιέχει την εικόνα αυτή θα ορίσετε ένα "χάρτη", καθορίζοντας τα τέσσερα πλαίσια της εικόνας (λεπτόνια, κουάρκ, μποζόνια, αλληλεπιδράσεις). Χρησιμοποιείστε κάποιο λογισμικό των Windows για τον προσδιορισμό των pixels. Οι τέσσερις περιοχές θα οδηγούν στις τέσσερις παρακάτω εικόνες: για λεπτόνια, για κουάρκ, για μποζόνια και για αλληλεπιδράσεις.

Οπότε, κάνοντας κλικ με το ποντίκι στην περιοχή, για παράδειγμα, των κουάρκ, στην αρχική εικόνα που είναι στο πλαίσιο, θα πρέπει να εμφανίζεται:

Εδώ μπορείτε να δείτε σε ξεχωριστό παράθυρο του αναγνώστη ιστοσελίδων το html αρχείo που περιέχει το ένθετο πλαίσιο όπου καλείται το δεύτερο html αρχείο που περιέχει την εικόνα με καθορισμένο τον "χάρτη".

Προηγούμενη ενότητα Επόμενη ενότητα