• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

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

RESIZE PHOTOS
ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 1
Με τον παρακάτω κώδικα μπορούμε να βάλουμε μερικά links στην αριστερή πλευρική μπάρα και όταν περνάμε το ποντίκι μας από πάνω τους να εμφανίζεται μία εικόνα μεγενθυμένη στις διαστάσεις και στη θέση που θέλουμε. Τον κώδικα αυτόν μπορείτε να τον δείτε σε λειτουργία λίγο πιο κάτω όπου παρουσιάζω με αυτόν τον τρόπο μερικές εικόνες από την Λευκάδα. Καλό είναι οι εικόνες που θα ανεβάσετε σε κάποιο λέυκωμα του google+ να έχουν αν όχι την ίδια διάσταση τουλάχιστον την ίδια αναλογία για να μην παραμορφωθούν στην μεγέθυνση. Μπορείτε να αλλάξετε τα χρώματα των backgrounds εκεί που γράφει background:#173374; και background:#255720;
Μπορείτε να αλλάξετε στην 9η γραμμή του κώδικα το top:260px; σε μικρότερο ή μεγαλύτερο ανάλογα με το πόσους συνδέσμους έχετε. Πρόκειται για την θέση της εικόνας προεσκόπησης που βρίσκεται κάτω ακριβώς από τους συνδέσμους και δεν θέλουμε να έχει μεγαλύτερο μέγεθος από αυτό που της έχουμε δώσει δηλαδή 2Χ1px γιατί θα καλύψει το επόμενο gadget. Μπορείτε επίσης να αλλάξετε στην 20η γραμμή του κώδικα τα left:250px; top:1px; width:480px; height:300px; Πρόκειται για την θέση της μεγενθυμένης εικόνας το πλάτος και το ύψος της. Τέλος αλλάξτε τα πράσινα και τα μώβ links μου με τα δικά σας links.

LEYKADA PHOTOS
LEYKADA AGIOFYLILEYKADA
LEYKADA PORTO KATSIKI-1LEYKADA
LEYKADA PORTO KATSIKI-2LEYKADA
LEYKADA PORTO KATSIKI-3LEYKADA
LEYKADA PORTO KATSIKI-4LEYKADA
LEYKADA PORTO KATSIKI-5LEYKADA
LEYKADA EGGREMNOILEYKADA
LEYKADA SCORPIOS-1LEYKADA
LEYKADA SCORPIOS-2LEYKADA
LEYKADA SCORPIOS-3LEYKADA
LEYKADA SCORPIOS-4LEYKADA
LEYKADA SCORPIOS-5LEYKADA
<style type="text/css">
dl.slides {display:block; padding:0; margin:0; list-style:none; position:relative; z-index:100; float:left;}
dl.slides dt {font: 14px arial; color:#FFFF00; padding:0 5px; background:#255720; }
dl.slides dd {margin:0; padding:0;}
dl.slides dd a {display:block; height:20px; background:#173374; color:#FFFFFF; padding:0 5px; text-decoration:none; font:normal 14px arial;}
dl.slides dd a:hover {text-decoration:underline;}
dl.slides dd a img {display:block; z-index:-1; border:1px solid #4EFF44; position:absolute;
left:0; top:260px; width:2px; height:1px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
dl.slides dd a:hover img {left:250px; top:1px; width:480px; height:300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.clear {clear:both;}
</style>

<dl class="slides">
<dt>LEYKADA PHOTOS</dt>
<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA AGIOFYLI<img src="http://i.imgur.com/FURuBVW.jpg" title="LEYKADA AGIOFYLI" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA PORTO KATSIKI-1<img src="http://i.imgur.com/rcivwQJ.jpg" title="LEYKADA PORTO KATSIKI-1" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA PORTO KATSIKI-2<img src="http://i.imgur.com/s87KUJb.jpg" title="LEYKADA PORTO KATSIKI-2" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA PORTO KATSIKI-3<img src="http://i.imgur.com/gCr4ycD.jpg" title="LEYKADA PORTO KATSIKI-3" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA PORTO KATSIKI-4<img src="http://i.imgur.com/WeZKATz.jpg" title="LEYKADA PORTO KATSIKI-4" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA PORTO KATSIKI-5<img src="http://i.imgur.com/pyL40yf.jpg" title="LEYKADA PORTO KATSIKI-5" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA EGGREMNOI<img src="http://i.imgur.com/W09tTTE.jpg" title="LEYKADA EGGREMNOI" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA SCORPIOS-1<img src="http://i.imgur.com/Djv3jOP.gif" title="LEYKADA SCORPIOS-1" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA SCORPIOS-2<img src="http://i.imgur.com/EXFMDur.jpg" title="LEYKADA SCORPIOS-2" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA SCORPIOS-3<img src="http://i.imgur.com/O1FreLJ.jpg" title="LEYKADA SCORPIOS-3" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA SCORPIOS-4<img src="http://i.imgur.com/szjKD2N.jpg" title="LEYKADA SCORPIOS-4" alt="LEYKADA" /></a></dd>

<dd><a href="http://imgur.com/a/2OFXh/layout/grid">LEYKADA SCORPIOS-5<img src="http://i.imgur.com/0m2UQLV.jpg" title="LEYKADA SCORPIOS-5" alt="LEYKADA" /></a></dd></dl>

Δεν υπάρχουν σχόλια:

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

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

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