Λύσεις — Εφαρμογή 14 · Χάρτης εικόνας — image map (σελ. 73–75) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 14 · Χάρτης εικόνας — image map (σελ. 73–75)

Ο κώδικας-λύση και ασκήσεις (usemap/map/area, σχήματα circle/rect/poly & συντεταγμένες, εξάρτηση από μέγεθος εικόνας). Γλώσσα HTML5.

Ο κώδικας-λύση της Εφαρμογής 14

Ερώτηση: Φτιάξτε χάρτη εικόνας με μια κυκλική και μια ορθογώνια περιοχή που οδηγούν σε διαφορετικές σελίδες.

Απάντηση:

• 
• Το usemap="#perioxes" συνδέει την εικόνα με τον <map name="perioxes">· κάθε <area> ορίζει σχήμα, συντεταγμένες και προορισμό.

Σύνοψη: (ενδεικτική) +

Κριτήρια αξιολόγησης:

• Κριτήριο: usemap↔map name + με shape/coords/href.

Δομή χάρτη εικόνας

Ερώτηση: Ποια στοιχεία/παράμετροι συνθέτουν έναν χάρτη εικόνας;

Απάντηση:

• <img usemap="#όνομα">: αναθέτει τον χάρτη στην εικόνα.
• <map name="όνομα">: ορίζει τον χάρτη· περιέχει τις περιοχές.
• <area shape="…" coords="…" href="…" alt="…">: κάθε κλικαρίσιμη περιοχή.

Σύνοψη: (ενδεικτική) img usemap="#name" → map name="name" → πολλά με shape/coords/href/alt.

Κριτήρια αξιολόγησης:

• Κριτήριο: usemap/map/area + οι βασικές παράμετροι του area.

Σχήματα ΚΑΙ συντεταγμένες

Ερώτηση: Πόσες/ποιες συντεταγμένες χρειάζεται κάθε σχήμα (circle, rect, poly);

Απάντηση:

• circle: 3 αριθμοί — x, y, ακτίνα.
• rect: 4 αριθμοί — x1, y1 (πάνω-αριστερά), x2, y2 (κάτω-δεξιά).
• poly: ζεύγη συντεταγμένων (x,y) για κάθε κορυφή του πολυγώνου.

Σύνοψη: (ενδεικτική) circle: x,y,r (3). rect: x1,y1,x2,y2 (4). poly: ζεύγη x,y ανά κορυφή.

Κριτήρια αξιολόγησης:

• Κριτήριο: σωστές συντεταγμένες ανά σχήμα (circle=3, rect=4, poly=ζεύγη).

Πρακτικά ζητήματα

Ερώτηση: Γιατί πρέπει να αποφασίζουμε το μέγεθος της εικόνας πριν ορίσουμε τις περιοχές;

Απάντηση:

• Οι συντεταγμένες των area μετρώνται σε pixel πάνω στην εικόνα του συγκεκριμένου μεγέθους.
• Αν αλλάξουμε το μέγεθος μετά, οι συντεταγμένες δεν αντιστοιχούν πλέον → πρέπει να τις ξαναϋπολογίσουμε. (Για πολύπλοκους χάρτες χρησιμοποιούμε εργαλεία δημιουργίας image map.)

Σύνοψη: (ενδεικτική) Γιατί οι coords εξαρτώνται από το μέγεθος της εικόνας· αν αλλάξει, πρέπει να ξαναϋπολογιστούν όλες.

Κριτήρια αξιολόγησης:

• ΠΑΓΙΔΑ: αλλαγή μεγέθους εικόνας → οι συντεταγμένες «χαλάνε».