Εικονικοί Χάρτες

Ένας εικονικός χάρτης είναι μια εικόνα που περιέχει "hot spots", περιοχές που μπορείς να κάνεις κλίκ και περιέχουν links.  Υπάρχουν, βασικά, δύο τύποι από εικονικούς χάρτες: του server και του client. Μια client-side απεικόνιση χάρτη έχει το πλεονέκτημα ότι φορτώνεται(loaded) μαζί με την HTML σελίδα που περιέχει. Αυτό δε σημαίνει ότι σώζεται όχι μόνο για χρήστες που χρησιμοποιούν χάρτη, αλλά επίσης, οτι οι συγγραφείς του Web δεν θα πρέπει να ανησυχούν εάν ο server τους δεν υποστηρίζει τους χάρτες.

Μπορείς να δημιουργήσεις έναν εικονικό χάρτη από μια εικόνα ή φτιαγμένο κατευθείαν από εσάς,ή με έναν βοηθητικό κατασκευαστή χάρτη,όπως, στα Ulead's WebExtensions, ή με μια πρακτική διαδικασία δημιουργίας χαρτών,όπως το LiveImage ή το MapEdit.

Το καλάθι-κείμενο που δίνεται παρακάτω είναι ένας εικονικός χάρτης με 24K σε περιοχές του προσωπικού μου website, LJ's Place by the Sea.

Image map for LJ's Place

Η εικόνα είναι μια διαφάνεια GIF. Τα γράμματα έιναι εμπλουτισμένα με τα εφέ του PSP's. Οι περιοχές και τα links του χάρτη έχουν καθοριστεί με τη χρήση του MapThis!

Για περισσότερες πληροφορίες για τη δημιουργία χαρτών,ρίξτε μια ματιά στη σελίδα του Mike Thomas image map tutorial. Ο Mike κάνει πολύ καλή δουλειά ,αναπτύσσοντας τους κώδικες των εικονικών χαρτών με το χέρι.

Πρίν, εμβαθύνεις, γύρω από τους χάρτες, σημειώνεται οτι σε μερικές περιπτώσεις μπορείς να πάρεις μια “εικόνα” για τον εικονικό χάρτη με μια απλή συλλογή από εικόνες και links.  Μελετώ αυτή την έκδοση faux image map από το καλάθι-κείμενο χάρτη μου:



Αυτός ο εικονικός χάρτης γίνεται από 3 διαφάνειες GIFs:
 
6K  
8K
10K
Αυτά τα 3 GIFs φορτώθηκαν με τη χρήση του ακόλουθου κώδικα HTML:
<center>
<table cellspacing=0 cellpadding=0>
   <tr><td>
      <a href="http://home.earthlink.net/~loridavis/sseeds.html"><img
           src="pics/MAP-SEED_cg31.gif" border=0 height=82 width=258></a><br><a
         href="http://home.earthlink.net/~loridavis/birds.html"><img
           src="pics/MAP-BIRD_cg32.gif" border=0 height=65 width=258></a><br><a
         href="http://home.earthlink.net/~loridavis/winerose.html"><img
           src="pics/MAP-ROSE_cg32.gif" border=0 height=111 width=258></a>
   </td></tr>
</table>
</center>
Για ορθογώνια τοποθέτηση μπορούν να προ σαρμοστούν με τον εξής τρόπο.  Η τεχνική για την κατασκευή εικονικών χαρτών “faux image map technique” δουλεύει πολύ καλά, είναι πολύ εύκολη και δεν απαιτεί επιπλέον software ή κάποιο ιδιάιτερο κώδικα χαρτών.
 

NextΠίσω  | Πίνακας περιεχομένων | Bασικά | How-To | Links | Store | ΕπόμενηNext