Πώς να δημιουργήσετε χάρτες εικόνας σε HTML;

1. Δημιουργήστε μια εικόνα:

- Ξεκινήστε δημιουργώντας ένα αρχείο εικόνας (π.χ. "image.jpg").

2. Καθορίστε τον χάρτη εικόνας:

- Στον κώδικα HTML, δημιουργήστε ένα στοιχείο `

3. Ορισμός Περιοχών με δυνατότητα κλικ:

- Μέσα στο στοιχείο "

4. Καθορίστε τις συντεταγμένες χάρτη εικόνων:

- Για κάθε στοιχείο «», καθορίστε τις συντεταγμένες που ορίζουν τα όρια της περιοχής με δυνατότητα κλικ. Αυτό μπορεί να γίνει χρησιμοποιώντας το χαρακτηριστικό `coords`. Οι συντεταγμένες καθορίζονται ως λίστα διαχωρισμένη με κόμμα, που αντιπροσωπεύει τις συντεταγμένες πάνω αριστερά (x1, y1) και κάτω δεξιά (x2, y2) της περιοχής.

5. Ορισμός ενέργειας για κλικ:

- Χρησιμοποιήστε το χαρακτηριστικό `href` μέσα στο `` για να καθορίσετε την ενέργεια που θα πρέπει να πραγματοποιείται όταν ένας χρήστης κάνει κλικ σε αυτήν τη συγκεκριμένη περιοχή της εικόνας. Θα μπορούσε να είναι ένας σύνδεσμος προς μια άλλη σελίδα, μια διεύθυνση email ή οποιαδήποτε άλλη έγκυρη διεύθυνση URL.

6. Συσχετίστε το χάρτη εικόνας με την εικόνα:

- Για να συνδέσετε τον χάρτη εικόνας με την εικόνα, χρησιμοποιήστε το χαρακτηριστικό `usemap` μέσα στο `

```

Σε αυτό το παράδειγμα, υπάρχει μια εικόνα με το όνομα "image.jpg" με δύο περιοχές με δυνατότητα κλικ. Η πρώτη περιοχή ορίζεται από ένα ορθογώνιο με συντεταγμένες (10, 10) και (150, 150), και όταν κάνετε κλικ, θα μεταφερθείτε στο "link-1.html". Η δεύτερη περιοχή ορίζεται από έναν κύκλο με κέντρο στο (200, 200) και ακτίνα 50 και συνδέεται με το "link-2.html" όταν κάνετε κλικ.

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