ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 2

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 2
Με τον παρακάτω κώδικα μπορούμε να βάλουμε μερικά links οπουδήποτε μέσα στο ιστολόγιό μας και όταν περνάμε το ποντίκι μας από πάνω τους να εμφανίζεται μία εικόνα στις διαστάσεις και στη θέση που εμείς θα ορίσουμε. Τον κώδικα αυτόν μπορείτε να τον δείτε σε λειτουργία λίγο πιο κάτω όπου παρουσιάζω με αυτόν τον τρόπο μερικές εικόνες από την Λευκάδα. Καλό είναι οι εικόνες να ανεβούν σε κάποιο λέυκωμα τουgoogle+ ή του imgur και να έχουν αν όχι την ίδια διάσταση τουλάχιστον την ίδια αναλογία για να εμφανίζονται όλες στον ίδιο συγκεκριμένο χώρο.

Μπορείτε να αλλάξετε την στρογγυλοποίηση στις γωνίες των εικόνων εκεί που γράφει border-radius:6px; Μπορείτε να αλλάξετε την θέση που θα εμφανίζονται οι εικόνες εκεί που γράφει top:31px; left:0px; Μπορείτε να αλλάξετε το μέγεθος των εικόνων που θα εμφανίζονται περνώντας το ποντίκι από πάνω τους εκεί που γράφει width="480" height="300" Τέλος αλλάξτε τα πράσινα links των εικόνων μου με τα δικά σας links εικόνων. Το αποτέλεσμα είναι αυτό που βλέπετε ακριβώς κάτω απο εδώ όταν περάσετε το ποντίκι πάνω απο τα links.

ΠΟΡΤΟ ΚΑΤΣΙΚΙ-1….. ΠΟΡΤΟ ΚΑΤΣΙΚΙ-2….. ΠΟΡΤΟ ΚΑΤΣΙΚΙ-3….. ΑΓΙΟΦΥΛΙ….. ΕΓΓΡΕΜΝΟΙ…..

<style>

.popup {position:relative;}

.popup span {position:fixed;padding:0px;border-radius:6px;left:-999em;z-index:999;}

.popup:hover {visibility:visible}

.popup:hover span {top:31px;left:0px;}

</style>

<a class="popup" href="http://i.imgur.com/rcivwQJ.jpg">ΠΟΡΤΟ ΚΑΤΣΙΚΙ-1…..

<span><img src="http://i.imgur.com/rcivwQJ.jpg" width="480" height="300"></span></a>

<a class="popup" href="http://i.imgur.com/WeZKATz.jpg">ΠΟΡΤΟ ΚΑΤΣΙΚΙ-2…..

<span><img src="http://i.imgur.com/WeZKATz.jpg" width="480" height="300"></span></a>

<a class="popup" href="http://i.imgur.com/s87KUJb.jpg">ΠΟΡΤΟ ΚΑΤΣΙΚΙ-3…..

<span><img src="http://i.imgur.com/s87KUJb.jpg" width="480" height="300"></span></a>

<a class="popup" href="http://i.imgur.com/FURuBVW.jpg">ΑΓΙΟΦΥΛΙ…..

<span><img src="http://i.imgur.com/FURuBVW.jpg" width="480" height="300"></span></a>

<a class="popup" href="http://i.imgur.com/W09tTTE.jpg">ΕΓΓΡΕΜΝΟΙ…..

<span><img src="http://i.imgur.com/W09tTTE.jpg" width="480" height="300"></span></a>

Αν θέλετε να εμφανίζονται οι σύνδεσμοι ο ένας κάτω απο τον άλλον τότε βάλτε πριν απο το πρώτο <a της κάθε εικόνας το <p> και πρίν το τελευταίο </a> της κάθε εικόνας το </p>