Η χρήση εικόνων στη Σελίδα σου (και όχι μόνο)

Για να χρησιμοποιήσεις μία εικόνα σε μία ιστοσελίδα, υπάρχει μία προϋπόθεση: να είναι η εικόνα δημόσια προσβάσιμη μέσα από μία διεύθυνση διαδικτύου.

Η διεύθυνση διαδικτύου είναι το URL της εικόνας.

Μαρκάρισε με το ποντίκι σου την φράση "http://www.photovolos.gr/images/logo.png" (χωρίς τα ") και σύρε την σε μία νέα καρτέλα του φυλλομετρητή σου. Εναλλακτικά θα μπορούσες να την πληκτρολογήσεις στη γραμμή διευθύνσεων και να ανοίξεις τη διεύθυνση αυτή.

Τι βλέπεις;

Η εικόνα αυτή (ένα αρχείο εικόνας png) προβάλλεται στην ιστοσελίδα της ΦΛΒ, καθώς είναι ένα αρχείο εικόνας δημόσια προσβάσιμο και με μία συγκεκριμένη διεύθυνση διαδικτύου. Την εικόνα μπορεί ο καθένας να την χρησιμοποιήσει σε οποιαδήποτε ιστοσελίδα είναι προσβάσιμη και ανοιχτή στο διαδίκτυο.

Οποιαδήποτε εικόνα στο διαδίκτυο μπορείς να την χρησιμοποιήσεις σε οποιαδήποτε σελίδα σου, αρκεί να έχεις το URL της.

Υπάρχουν απλοί τρόποι να πάρεις την διαδικτυακή τοποθεσία μίας εικόνας, μέσα από τον φυλλομετρητή σου (browser).

Εάν έχεις Firefox π.χ., πήγαινε στη σελίδα της ΦΛΒ, επάνω στην εικόνα κάνε ΔεξίΚλικ, δώσε την εντολή "Αντιγραφή τοποθεσίας εικόνας". Το URL αντιγράφηκε στο Πρόχειρο. Πήγαινε τώρα σε μία νέα καρτέλα στον φυλλομετρητή, επικόλλησε στη γραμμή διευθύνσεων το URL, και δες τι βγαίνει.

Εναλλακτικά, επάνω στην εικόνα κάνε ΔεξιΚλικ, δώσε "Προβολή εικόνας", και κοίτα τι υπάρχει στη γραμμή διευθύνσεων.

Εισαγωγή εικόνας

Έστω ότι έχω το URL μιας εικόνας. Πώς την εισάγω στη σελίδα μου;

Στον επεξεργαστή της σελίδας μου, πατώ ENTER για να δημιουργήσω μία νέα παράγραφο στη σημείο που θέλω να μπει η εικόνα. Κάθε εικόνα καλό είναι να βρίσκεται στη δική της παράγραφο, χωρίς να μπλέκεται με κείμενο μέσα στην ίδια παράγραφο. Μετά μπαίνω σε κατάσταση κώδικα. Η νέα παράγραφος σημαίνεται ως εξής:

<p>&nbsp;</p>

Σβήνω το &nbsp; να μην περιέχει τίποτε η παράγραφος, και στη θέση του εισάγω τον κώδικα μιας εικόνας. Η εικόνα σημαίνεται με το tag img. Η παράγραφος θα γίνει

<p><img src="" /></p>

Ως "προέλευση" της εικόνας (ως το attribute src (source) του tag img) ορίζω το URL της εικόνας. Προσοχή στα διαστήματα πριν και μετά.

<p><img src="http://www.photovolos.gr/images/logo.png" /></p>

Τώρα ο κώδικας συνολικά είναι:

<p>[Δεν υπάρχει περιεχόμενο.]</p>

<p><img src="http://www.photovolos.gr/images/logo.png" /></p>

Αντέγραψε το παραπάνω όλο μαζί από εδώ, επικόλλησέ το στο περιεχόμενο του επεξεργαστή, και είτε πήγαινε τον επεξεργαστή σε κατάσταση WYSIWYG, είτε δώσε Αποθήκευση και δες ζωντανά τη Σελίδα.

Διαστάσεις μιας εικόνας

Εάν η εικόνα είναι μικρότερη από το διαθέσιμο πλάτος στη σελίδα όπου προβάλλεται, προβάλλεται στο "φυσικό" της μέγεθος.

Εάν είναι μεγαλύτερη, η σελίδα της ΦΛΒ έχει έτσι κατασκευαστεί ώστε η εικόνα να προσαρμόζεται αυτόματα στο διαθέσιμο πλάτος.

Μία άλλη περίπτωση είναι να ορίσεις εσύ το πλάτος και αυτό γίνεται με τρόπο που περιγράφεται στην ανωτέρω παραπομπή που ανέφερα για το tag img.

Ας δούμε ένα παράδειγμα μεγάλης εικόνας. Γράψε στον επεξεργαστή:

<p><img src="http://static.panoramio.com/photos/original/125854269.jpg" /></p>

Αποθήκευσε. Δες τη σελίδα ζωντανά. Η εικόνα προσαρμόζεται στο πλάτος. Επάνω στην εικόνα δώσε ΔεξιΚλικ, δώσε "Προβολή εικόνας". Η εικόνα φαίνεται μεγάλη, στις αρχικές της διαστάσεις  και στη γραμμή διευθύνσεων βλέπεις το URL της.

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

Δηλ. μπορείς να έχεις εικόνες σου οπουδήποτε στο διαδίκτυο (blogs, panoramio, άλλες σελίδες και υπηρεσίες κλπ.) και να τις χρησιμοποιήσεις στη Σελίδα Μέλους.

Η μόνη προϋπόθεση, να είναι δημόσιες και προσβάσιμες, δηλ. από τη σελίδα όπου υπάρχουν να σού επιτρέπεται να πάρεις το URL.

Ανέβασμα εικόνων σε "ελεύθερους χώρους"

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

Υπάρχουν κάποιοι ιστότοποι που προσφέρουν δωρεάν αυτή την υπηρεσία, δηλ. τη δωρεάν φιλοξενία μιας εικόνας και μάλιστα με ελεύθερη πρόσβαση δηλ. με ένα δημόσιο και προσβάσιμο URL.

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

Θα αναφέρω δύο τέτοια παραδείγματα σελίδων που προσφέρουν δωρεάν φιλοξενία εικόνων.

1. imgur

Πηγαίνω στη σελίδα του imgur. Σητν κορυφή πατάω "Upload images" (ανέβασε εικόνες). Με το "browse..." εντοπίζω το αρχείο που θέλω να ανεβάσω. Εννοείται ότι πρώτα το έχω ετοιμάσει, στις κατάλληλες διαστάσεις, διότι δεν υπάρχει λόγος να έχω μία τεράστια εικόνα (μεγαλύτερη από το διαθέσιμο πλάτος της σελίδας όπου θα μπει), πράγμα που θα επηρέαζε αρνητικά τον χρόνο κατεβάσματος της σελίδας στον επισκέτη της σελίδας μου. Επιλέγω αρχείο, πατώ "start upload". Mόλις ανέβει, βγαίνει η σελίδα της εικόνας, δεξιά κλικάρω στο "Direct Link" (άμεσος σύνδεσμος) και αντιγράφω το URL.

2. imagehousing

Πηγαίνω στη σελίδα του imagehousing. Πατώ πάνω δεξιά "Αναζήτηση", βάζω και μια περιγραφή σύντομη (μια λέξη), πατώ "Upload image", βγαίνει η σελίδα της εικόνας, στο κάτω μέρος πρέπει να πάρω το URL. Εδώ είναι λίγο πιο μπερδεμένο, αντιγράφω το "Html image for website", που είναι κάπως έτσι

<a href="http://www.imagehousing.com/image/word/1252223"><img border="0" src="http://img1.imagehousing.com/5/f676059a2372aca4863893850333c61d.jpg" alt="Word Photo"></a><br><a href="http://www.imagehousing.com/">Image Search Engine</a>

εμένα με ενδιαφέρει το URL του αρχείου jpg δηλ. μόνο το κομμάτι με τα μπλε γράμματα.

Προβολή εικόνων με ειδικό τρόπο

Ωραία μέχρις εδώ, αλλά η σελίδα της ΦΛΒ έχει φτιαχτεί έτσι ώστε οι εικόνες να παρουσιάζονται με έναν ιδιαίτερο τρόπο, πράγμα που αφ΄ ενός συμβάλλει στην ενιαία αισθητική της σελίδας, και αφ΄ ετέρου δίνει τη δυνατότητα προβολής μεγάλων εικόνων που ξεπερνούν το διαθέσιμο χώρο στη σελίδα. Αυτό είναι σκόπιμο επειδή υπάρχουν χρήστες που θέλουν να απολαμβάνουν τις εικόνες σε μεγάλο μέγεθος σε επιτραπέζιες οθόνες. Ταυτόχρονα όμως η προβολή πρέπει να γίνεται με τρόπο ώστε η εικόνα να προσαρμόζεται αυτόματα στο μέγεθος του παραθύρου, ώστε παράλληλα να εξυπηρετείται και ο χρήστης που βλέπει τη σελίδα στο περιβάλλον των μικρών κινητών συσκευών.

Εάν λοιπόν η εικόνα που θέλεις να χρησιμοποιήσεις ξεπερνά το μέγεθος του διαθέσιμου χώρου στη σελίδα (860 pixels), συνιστάται η ακόλουθη μέθοδος. Η εργασία γίνεται σε κατάσταση κώδικα.

1. Προβολή μίας φωτογραφίας

<p> <a class="fancybox" href="url" title="λεζάντα"><img src="url" width="auto" height="200px" /></a> </p>

όπου:

• url το URL της εικόνας
• λεζάντα η λεζάντα της εικόνας (προαιρετική, μπορεί να μείνει κενό)

Η φωτογραφία εμφανίζεται ως ένα εικονίδιο και ο χρήστης με κλικ επάνω του την προβάλλει μεγάλη.

2. Προβολή ομάδας φωτογραφιών ως γκαλερί

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

<p>

<a class="fancybox" href="url1" rel="group1" title="λεζάντα1"><img src="url1" width="auto" height="200px" /></a>

<a class="fancybox" href="url2" rel="group1" title="λεζάντα2"><img src="url2" width="auto" height="200px" /></a>

<a class="fancybox" href="url3" rel="group1" title="λεζάντα3"><img src="url3" width="auto" height="200px" /></a>

<a class="fancybox" href="url4" rel="group1" title="λεζάντα4"><img src="url4" width="auto" height="200px" /></a>

...

</p>

όπου:

• url1 το URL της εικόνας 1, url2 το URL της εικόνας 2, ...
• λεζάντα1 η λεζάντα της εικόνας 1, λεζάντα2 η λεζάντα της εικόνας 2, ... (προαιρετικά)
• group1 η ταυτότητα (ετικέτα, μια λέξη) της συγκεκριμένης ομάδας φωτογραφιών.

Ο τρόπος αυτός παρουσίασης φαίνεται π.χ. σε αυτή τη σελίδα.

Created with the Personal Edition of HelpNDoc: What is a Help Authoring tool?