06 Νοεμβρίου 2010



14 Εικόνες η μία δίπλα στην άλλη και σε σειρές

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




Ίσως να μας βολεύει κάτι τέτοιο κάποιες φορές.
Μπορεί όμως κάποιες άλλες, να θέλαμε τις εικόνες μας να εμφανίζονται η μία δίπλα στην άλλη.
Να πώς γίνεται:

Πρώτα πρώτα, πρέπει να γνωρίζουμε το width (πλάτος) του χώρου που θα μπούν οι εικόνες μας. Για παράδειγμα,


..άρα, οι εικόνες που θα χρησιμοποιήσω, δεν πρέπει το άθροισμά τους (μαζί με το κενό ανάμεσά τους) να ξεπερνάει τα 500 pixels.
Εάν το ξεπερνάνε, τότε πρέπει να τις μικρύνουμε, είτε με κάποιο πρόγραμμα, είτε με την εντολή width=XXpxls (XX= οποιοσδήποτε αριθμός ως πλάτος της εικόνας).

Ανεβάζουμε λοιπόν κάπου τις εικόνες μας, και παίρνουμε το URL τους.
Ας υποθέσουμε πως θα χρησιμοποιήσουμε δύο εικόνες. Φτιάχνουμε μια "ταμπέλα" λοιπόν, και μέσα σ' αυτήν, θα μπούν οι εικόνες μας.


<table>
<tr>
<td><img src="photo1 URL" width="180" /></td>
<td><img src="photo2 URL" width="180" /></td>
</tr>
</table>


Αντικαθιστούμε το κάθε photo1 URL και το κάθε photo2 URL με το URL που πήραμε απο την σελίδα φιλοξενίας της εικόνας μας, καθώς και το 180 με τον αριθμό που επιθυμούμε ως πλάτος της εικόνας μας.
Χρησιμοποιώντας το παραπάνω παράδειγμα εγώ τώρα, και αλλάζοντας το 180 σε 140, έχω αυτό το αποτέλεσμα:


η και τρείς εικόνες,


κι αν τις μικρύνω κι άλλο (90pixels), ακόμη πιο πολές, δείτε..


Για να αλάξουμε γραμμή και να βάλουμε απο κάτω κι άλλες, απλά χρησιμοποιούμε την εντολή <BR/> και συνεχίζουμε για κάθε προσθήκη νέας εικόνας, με την σειρά
<td><img src="photo URL width="180" /></td>
να επαναλαμβάνεται για κάθε εικόνα.
Οπότε έχουμε όσες εικόνες θέλουμε, σε όσες σειρές μας αρέσει:






Καλή επιτυχία.


"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις."





Print this post



Related Posts :



14 σχόλια:

PEGOUINOS είπε... Best Blogger Tips

από τον κώδικα λοιπουν τα " μετά το photo2 URL

δηλαδή img src="photo2" URL width="180"
αντί για img src="photo2 URL width="180"


AATON είπε... Best Blogger Tips

Πολύ σωστή η παρατήρηση φίλε PEGOUINO, παράλειψή μου και σ' ευχαριστώ, το διόρθωσα και πρέπει να 'ναι τώρα όλα εντάξει, συμφωνείς; :)


vaggelis είπε... Best Blogger Tips

Εισαι πραγματικος Δασκαλος.Οι συμβουλες σου ειναι μια και μια.Με εχεις βοηθησει απιστευτα και σε ευχαριστω. Αν μπορουσες να επεξηγησεις το ''Φτιάχνουμε μια "ταμπέλα" λοιπόν, και μέσα σ' αυτήν, θα μπούν οι εικόνες μας'' θα το εκτιμουσα :)


AATON είπε... Best Blogger Tips

Γειά σου Βαγγέλη.
Όταν λέω ''Φτιάχνουμε μια ταμπέλα", είναι ακριβώς αυτό που λέω. Δηλαδή: Αν χρησιμοποιείς Word, μπορείς να φτιάξεις "ταμπέλες", τα λεγόμενα Tables στα Αγγλικά, όπου μέσα τους μπορείς να βάλεις είτε κείμενο, είτε εικόνα.
Αυτό κάνουμε λοιπόν και εδώ, απλά το κάνουμε, όχι με κάποιο πρόγραμμα, αλλά με την χρήση CSS/HTML κώδικα


Σωτηρόπουλος Βαγγέλης είπε... Best Blogger Tips

na sai kala daskale.euxaristw!


Ανώνυμος είπε... Best Blogger Tips

Σε ευχαριστούμε πάρα πολύ για όλα αυτά που μας δείχνεις (σε εμάς τους άσχετους).

Θα ΄θελα να σου προτείνω κάτι που έχω δει σε κάποιο άλλο μπλογκ: Στο τέλος της ανάρτησης είχε επιλογή για "Ευχαριστώ". Νομίζω είναι πιο απλό από το Like, δεν χρειάζεται να εισαι μέλος του ΦΒ και αν θες το προσθέτεις κι εσύ.

Εγώ πάντως θα πρόσθετα, ευχαρίστως 5-6 "ευχαριστώ" σε ισάριθμες αναρτήσεις σου, που μου φάνηκαν χρήσιμες στη διαμόρφωση του μπλογκ μου.


islarooms είπε... Best Blogger Tips

Καλημερα,συνεχισε την πολυ καλη δουλεια σου..Εχω ενα μικρο προβληματακι.Εχω ανεβασει τις εικονες στο flickr παιρνω το λινκ τους(απο το grab link).
δημιουργω την ετικετα μεσα σε ενα πλαισιο του blog(σan gadget)και αντιγραφοντας τα url οταν εμφανιζετε το blog η κανω προεπισκοπηση οι εικονες δεν εμφανιζοντα,παρα μομο το πλαισιο τουε και το γνωστο x. ποιο ειναι το λαθος που κανω?ευχαριστω


AATON είπε... Best Blogger Tips

***Ανώνυμος, Αν βρείς που το είδες, δείξ' το μου. Σε ευχαριστώ πάντως :)

*** islarooms, λογικό να μην εμφανίζει την εικόνα, αφού το μόνο που βάζεις, είναι το URL της.
Για να την εμφανίσει, πρέπει το URL να τοποθετηθεί μέσα σε κώδικα, ο οποίος με τη σειρά του, δίνει εντολή σε κάθε Browser να εμφανίσει την εικόνα.
Ο κώδικας είναι αυτός (αντέγραψέ τον)

<img src="ΕΔΩ_ΒΑΛΕ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΟΥ">

Αντικατάστησε την φράση λοιπόν: "ΕΔΩ_ΒΑΛΕ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΟΥ" με το URL που πήρες απο το flickr, και βάλε τον έτοιμο πια κώδικα σαν Widget η οπουδήποτε θέλεις (ακόμα και σε αναρτήσεις) Η εικόνα θα εμφανιστεί πλέον κανονικά. Μπορείς να χρησιμοποιήσεις τον κώδικα για όσες φωτογραφίες (εικόνες) θέλεις.
Περιμένω τα αποτελέσματα :))


islarooms είπε... Best Blogger Tips

Ευχαριστω πολυ δουλευει μια χαρα,μολις ολοκληρωσω το blog θα σου το στειλω...:))))


Cataman(Kosmas) είπε... Best Blogger Tips

Νικόλα σε ευχαριστώ γιαυτή σου την ανάρτηση, μου είναι απολύτως απαραίτητη.
Απλά εγώ την προχώρησα ένα βήμα παρακάτω. Έκανα κάθε μικρογραφία της φωτογραφία έναν σύνδεσμο για να ανοίγει μεγαλύτερη η φωτογραφία. Δές εδώ την πρώτη μου τέτοια ανάρτηση:
http://thalassografies1.blogspot.com/2011/03/dar-mlodziez.html


Ανώνυμος είπε... Best Blogger Tips

θα μπορουσα να μαθω πως γινεται να ανοιγει συνδεσμος σε καθε εικονα;
τι διαδικασια πρεπει να ακολουθησω;
ευχαριστω


irini είπε... Best Blogger Tips

Σε ευχαριστω ΑΑΤΟΝ με εσωσες.Το χρησιμοποιησα και δουλευει μια χαρα.
Το μονο προβλημα ειναι οτι δεν ξερω πως θα αφησω μεταξυ τους κενα.Δηλαδη να μην ειναι η καθε εικονα κολλητα με την αλλη.
Μπορεις να με βοηθησεις?
http://dianitascooking.blogspot.com/


An. Ni είπε... Best Blogger Tips

καλησπερα! εψαχνα εδω κια ωρες για να βρω την συγκεκριμενη αναρτηση!!!
πως μπορω να προσθεσω και λινκ στις εικονες που θα βαλω διπλα διπλα?ευχαριστω!


Βασω Ασκητοπούλου είπε... Best Blogger Tips

Πολύ καλό. Ευχαριστώ


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next