Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα.
Στο μάθημα 8a μάθαμε την HTML για να βάζουμε μια εικόνα στη σελίδα μας, και στο μάθημα 9e είδαμε πως μπορούμε να μετετρέψουμε μια εικόνα σε υπεσύνδεσμο. Απο τις πρώτες ημέρες του ιστού υπήρχε και ένας άλλος τρόπος ώστε να μπορεί κανείς να μετατρέψει σε συνδέσμους διάφορα τμήματα μιας εικόνας - οι λεγόμενοι χάρτες γραφικών (Image Maps).
Αλλά μέχρι σχετικά πρόσφατα, οι χάρτες γραφικών προϋποθέταν οτι ορισμένα πράγματα θα επεξεργαζόταν απο τον web server. Αυτός είναι ο τρόπος λειτουργίας τους:
Αυτή είναι η διαδικασία απο την πλευρά του server. Μια διαδικασία αποτελεσματική που ο server μπορουσε να ολοκληρώσει σε κλάσματα του δευτερολέπτου. Αλλά αυτό σήμαινε οτι για να μπορείς να χρησιμιποιήσεις ένα χάρτη γραφικών θα έπρεπε να έχεις πρόσβαση σε έναν web server.
Spyglass ήταν ο πρώτος browser σχεδιασμένος με τη δυνατότητα να κάνει τους παραπάνω υπολογισμούς και να μεταφέρει την κατάλληλη URL με βάση τις συντετεγμένες που υπήρχαν μέσα στην HTML μιας σελίδας. ΟΛόκληρη η διαδικασία που περιγράψαμε παραπάνω γίνεται τώρα απο τον ίδιο τον browser. Για περισσότερες πληροφορίες σχετικά με τους χάρτες γραφικών, δες τη σελίδα Imagemap Help Page (IHiP).
Η HTML που χρειάζεται για ένα χάρτη γραφικών είναι:
<img src="image.gif" usemap="#map_name">
όπου image.gif είναι το όνομα του αρχείου της εικόνας και map_name είναι ένας σύνδεσμος anchor (ή bookmark) (δες μάθημα 9d) που οδηγεί κάπου μέσα στη ίδια σελίδα:
<map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
:
:
</map>
Κάθε γραμμή στην ετικέτα <map>...</map> αντιπροσωπεύει μια διαφορετική περιοχή, που ορίζεται απο συντεταγμένες. Οι coords=x1,y1 είναι οι οριζόντιες και κάθετες περιοχές (σε pixels) απο την πάνω αριστερή γωνία της εικόνας και x2,y2 ειναι οι οριζόντιες και κάθετες περιοχές απο τη κάτω δεξιά γωνία. είναι οι διευθύνσεις στις οποίες πρέπει να μεταφερθεί ο χρήστης ότνα κάνει κλικ σε κάποια απο τις περιοχές.
Σημείωση: Για να ορίσετε τις συντεταγμένες μιας περιοχής θα πρέπει να χρησιμοποιήσετε κάποιο πρόγραμμα επεξεργασίας γραφικών. Στα sites Image Map Help Page ή Yahoo μπορείτε να βρείτε πολλά βοηθητικά προγράμματα για το σκοπό αυτό. Για το μάθημα αυτό, θα σας δώσουμε εμείς τις ακριβής συντεταγμένες.
Στο μάθημα αυτό θα προσθέσουμε στη σελίδα Volcano Terminology (αρχείο term.html) μια εικόνα που δείχνει διάφορα είδη ηφαιστιακών εκρήξεων. Κάθε μια θα οδηγεί σε άλλα web site. Επιπλέον θα δημιουργήσουμε ακόμη δυο συνδέσμους σε αρχεία του δικού μας site.
There
are many different types of volcanic eruptions and landforms.
They can be classified according to the
<A HREF="explode.html">degree of "explosiveness"</A>
and the <A HREF="height.html">height</A> of the eruption column:
<p>
<center>
<font size=+2>
Investigate each type by clicking on a picture
</font><br>
<img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
<p>
</center>
Σημείωση: Εισαγάγαμε μια εικόνα η οποία θα αναφέρετε σε ένα σύνολο συντεταγμένων με το όνομα "volcmap". Η ετικέτα <center>...</center> τοποθετεί την εικόνα στο μέσο της σελίδας (δες μάθημα 21). Η ιδιότητα border=0 μέσα στην ετικέτα <img> αποτρέπει την εμφάνιση περιθωρίου γύρω απο την εικόνα. Επίσης βάλαμε συνδέσμους προς δύο νεα αρχεία HTML που θα δημιουργήσουμε παρακάτω.
<map name="volcmap">
<area shape="rect"
href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html"
coords="48,46,204,153">
<area shape="rect" href="explode.html"
coords="0,66,26,227">
<area shape="rect" href="height.html"
coords="95,283,378,309">
<area shape="rect"
href="http://www.geo.mtu.edu/volcanoes/pinatubo/"
coords="321,154,468,261">
<area shape="rect" href="http://stromboli.net/"
coords="172,155,318,274">
<area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/"
coords="36,155,168,276">
<area shape="rect"
href="http://www.geo.mtu.edu/volcanoes/santamaria/"
coords="90,3,343,123">
</map>
Σημείωση: Προσέξτε οτι 5 απο τις 7 περιοχές που έχουμε ορίσει οδηγούν σε άλλα sites. Οι άλλες 2 οδηγούν σε τοπικά αρχεία που θα δημιουργήσουμε στο επόμενο βήμα.
<html>
<head>
<title>Explosiveness</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#EEEEBB
LINK=#44DDFF VLINK=#00FF88>
<H5>Volcano Web /
<A HREF="index.html">Index</A> /
<A HREF="term.html">Volcano Terminology</A> /
</H5>
<h1 align=center>Explosiveness</h1>
The <b>explosiveness</b> of an observed volcanic
eruption is estimated by the calculated force of
the eruption. Experiments have shown that when water
comes in contact with hot magma, the eruption is
much stronger- this is known as <b>hydro-volcanism</b>.
<p>
For pre-historic eruptions, the explosiveness is estimated
by the degree of fragmentation of small volcanic particles.
A more explosive eruption will "shatter" volcanic tephra
much more than a less explosive eruption.
<p>
<a href="term.html">
<img src="../pictures/left.gif" alt="** " border=0>
Return to <i>Volcano Web</i></a>
<HR>
<ADDRESS>
<B><A HREF="index.html">Volcano Web</A> :
<A HREF="term.html">Volcano Terminology</A> :
Explosiveness</B> <p>
created by Lorrie Lava,
<A HREF="mailto:lava@pele.bigu.edu">
lava@pele.bigu.edu</A><br>
Volcanic Studies, <A HREF="http://www.bigu.edu/">
Big University</A><p>
<TT>last modified: April 1, 1995</TT>
</ADDRESS>
<p>
<tt>URL: http://www.bigu.edu/web/explode.html</tt>
<p>
</body>
</html>
<html>
<head>
<title>Height of Eruption Column</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#EEEEBB
LINK=#44DDFF VLINK=#00FF88>
<H5>Volcano Web /
<A HREF="index.html">Index</A> /
<A HREF="term.html">Volcano Terminology</A> /
</H5>
<h1 align=center>Height of Eruption Column</h1>
The <b>height</b> of a volcanic eruption cloud
(in kilometers) is taken from direct observation
or from estimates based upon historic accounts.
<p>
For pre-historic eruptions, this scale is calculated
based upon the <b>dispersal</b> of the volcanic products-
i.e. how far and wide they are scattered. Volcanic
eruptions that have very tall columns will spread
tephra far and wide.
<p>
<a href="term.html">
<img src="../pictures/left.gif" alt="** " border=0>
Return to <i>Volcano Web</i></a>
<HR>
<ADDRESS>
<B><A HREF="index.html">Volcano Web</A> :
<A HREF="term.html">Volcano Terminology</A> :
Height of Eruption Column</B> <p>
created by Lorrie Lava,
<A HREF="mailto:lava@pele.bigu.edu">
lava@pele.bigu.edu</A><br>
Volcanic Studies,
<A HREF="http://www.bigu.edu/">
Big University</A><p>
<TT>last modified: April 1, 1995</TT>
</ADDRESS>
<p>
<tt>URL: http://www.bigu.edu/web/height.html</tt>
<p>
</body>
</html>
Αν θέλετε συγκρίνετε τη δουλειά σας με ένα δείγμα για το πως θα πρέπει μα μοιάζει το αποτέλεσμα.
Περισσότερες Πληροφορίες
Για περισσότερες πληροφορίες, σας προτείνουμε να ρίξετε μια ματιά στο Image Map Help Page.
Στη συνέχεια: 25. Ετικέτες META