Εισαγωγή εικόνων. ετικέτα <img>

Transcript

1 Εισαγωγή εικόνων ετικέτα <img>

2 σύνταξη <img src= url /> η ιδιότητα src καθορίζει ποια εικόνα θα εισαχθεί στη σελίδα η τιμή url είναι η πλήρης ή σχετική διαδρομή της εικόνας

3 Παράδειγμα 1 <img src= multimedia/image1.gif /> c:\site Index.html multimedia Image1.gif

4 Παράδειγμα 2 <img src= image1.gif /> c:\site Index.html Image1.gif

5 Παράδειγμα 3 <img src= /> multimedia Index.html Image1.gif

6 Ιδιότητα Alt Alt : ορίζει εναλλακτικό κείμενο <img src="boat.gif" alt="βάρκα"> Το εναλλακτικό κείμενο εμφανίζεται στην περίπτωση που για κάποιο λόγο δεν μπορεί να εμφανιστεί η εικόνα

7 Ιδιότητα align align : στοιχίζει την εικόνα κατά την κατακόρυφη και οριζόντια κατεύθυνση σε σχέση με το περιβάλλον κείμενο. Τιμή left right top middle bottom Σημασία Αριστερά Δεξιά Το πάνω μέρος της εικόνας στοιχίζεται με το κείμενο Το μέσον της εικόνας στοιχίζεται με το κείμενο Το κάτω μέρος της εικόνας στοιχίζεται με το κείμενο

8 Ιδιότητα align (τιμή bottom) Μια εικόνα <img src="hackanm.gif«align="bottom" width="48" height="48"> μέσα στο κείμενο Μια εικόνα μέσα στο κείμενο

9 Ιδιότητα align (τιμή middle) Μια εικόνα <img src="hackanm.gif«align= middle" width="48" height="48"> μέσα στο κείμενο Μια εικόνα μέσα στο κείμενο

10 Ιδιότητα align (τιμή top) Μια εικόνα <img src="hackanm.gif«align= top" width="48" height="48"> μέσα στο κείμενο Μια εικόνα μέσα στο κείμενο

11 Ιδιότητα align (τιμή right) <p align="justify">κάθε ηλεκτρονικός υπολογιστής (ΗΥ) αποτελείται από το υλικό και το λογισμικό.</p> <img src="hackanm.gif" align= right /> <p align="justify">το υλικό </p>

12 Ιδιότητα align (τιμή left) <p align="justify">κάθε ηλεκτρονικός υπολογιστής (ΗΥ) αποτελείται από το υλικό και το λογισμικό.</p> <img src="hackanm.gif" align= left /> <p align="justify">το υλικό </p>

13 Ιδιότητα align (χωρίς ιδιότητα) <p align="justify">κάθε ηλεκτρονικός υπολογιστής (ΗΥ) αποτελείται από το υλικό και το λογισμικό.</p> <img src="hackanm.gif" /> <p align="justify">το υλικό </p>

14 Εικόνα ως σύνδεσμος <p> Χρήση εικόνας ως συνδέσμου: <a href = " <img src = "smiley.gif"/> </a> </p>

15 Χάρτης συνδέσμων Ένα παράδειγμα <p>πατήστε στον ήλιο ή σε έναν από τους παλήτες για να τον δείτε από πιο κοντά:</p> <img src="planets.gif" width="145" height="126" alt="πλανήτες" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="ήλιος" href="sun.gif" /> <area shape="circle" coords="90,58,3" alt="ερμής" href="merglobe.gif" /> <area shape="circle" coords="124,58,8" alt="αφροδίτη" href="venglobe.gif" /> </map>

16 Χάρτης συνδέσμων Ένα παράδειγμα <p>πατήστε στον ήλιο ή σε έναν από τους πλανήτες για να τον δείτε από πιο κοντά:</p> <img src="planets.gif" width="145" height="126" alt="πλανήτες" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="ήλιος" href="sun.gif" /> <area shape="circle" coords="90,58,3" alt="ερμής" href="merglobe.gif" /> <area shape="circle" coords="124,58,8" alt="αφροδίτη" href="venglobe.gif" /> </map> (0, 0) (82,126) Χ Υ

17 Χάρτης εικόνων - Ετικέτα map Η ετικέτα <map> δημιουργεί ένα χάρτη συνδέσμων, χωρίζοντας μια εικόνα σε περιοχές διαφορετικών συνδέσμων. Δέχεται την ιδιότητα name που δίνει ένα όνομα στο χάρτη συνδέσμων που ορίζεται με την ετικέτα <map>. Το όνομα αυτό χρησιμοποιείται από την ιδιότητα usemap της ετικέτας img για να συσχετιστεί η εισαγόμενη εικόνα με τον αντίστοιχο χάρτη. Δηλαδή, η ιδιότητα usemap δηλώνει ποιο χάρτη συνδέσμων θα χρησιμοποιήσει η εικόνα που εισάγεται στην ιστοσελίδα με την ετικέτα <img>. <img src= planets.gif usemap= #planetmap /> <map name= usemap > </map>...

18 Χάρτης εικόνων - Ετικέτα area Η ετικέτα <area> ορίζει μια περιοχή της εικόνας ως σύνδεσμο. Η ετικέτα <area> περικλείεται πάντα μέσα στην ετικέτα <map> (η οποία μπορεί να περιέχει περισσότερες από μία ετικέτες <area>). Η ετικέτα <area> δέχεται την ιδιότητα shape που καθορίζει το σχήμα (μορφή) της περιοχής-συνδέσμου, την ιδιότητα coords που καθορίζει τις συντεταγμένες της περιοχήςσυνδέσμου, και την ιδιότητα href που καθορίζει ποιο αρχείο θα φορτώνει ο σύνδεσμος.

19 Χάρτης εικόνων Ιδιότητες shape και coords Οι τιμές της ιδιότητας shape είναι rect, circle, και polygon, και οι τιμές της coords δηλώνονται ανάλογα με την τιμή της shape. Όταν το σχήμα της περιοχής-συνδέσμου είναι ορθογώνιο (shape= rect ) ορίζουμε ως συντεταγμένες της περιοχής την πάνω αριστερή και την κάτω δεξιά γωνία. <area shape="rect" coords="0,0,82,126 href="sun.gif" /> Όταν το σχήμα της περιοχής-συνδέσμου είναι κύκλος (shape= circle ) ορίζουμε ως συντεταγμένες της περιοχής τις συντεταγμένες του κέντρου του κύκλου και το μήκος της ακτίνας.. <area shape="circle" coords="90,58,3" href="merglobe.gif" /> Όταν το σχήμα της περιοχής-συνδέσμου είναι πολυγωνικό (shape= poly ) ορίζουμε ως συντεταγμένες της περιοχής τις συντεταγμένες των ακμών του πολυγώνου. <area shape= poly" coords= 5,8,24,32,82,126,5,8 href= tri.gif" />

20 Άλλες ιδιότητες της <img> Ιδιότητα border height width hspace vspace Σημασία Περίγραμμα εικόνας σε pixel Ύψος εικόνας σε pixel Πλάτος εικόνας σε pixel Οριζόντια απόσταση από το κείμενο σε pixel Κατακόρυφη απόστασή από το κείμενο σε pixel

21 Παράδειγμα <p align= justify > </p> <img src= hackanm.gi f align= left border= 5 height= 150 width= 150 hspace= 30 vspace= 30 /> <p align= justify > </p> border vspace hspace