ΠΩΣ ΕΜΦΑΝΙΖΩ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΣΤΑΤΙΚΟ ΣΗΜΕΙΟ ΤΟΥ BLOG ΜΟΥ

ΠΩΣ ΕΜΦΑΝΙΖΩ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΣΤΑΤΙΚΟ ΣΗΜΕΙΟ ΤΟΥ BLOG ΜΟΥ
Με τον παρακάτω κώδικα μπορούμε πατώντας πάνω σε buttons με περιγραφή να εμφανίσουμε εικόνες σε στατικά σημεία του blog μας. Ο κώδικας αυτός μπορεί να μπεί απλά σαν gadget στις πλευρικές μπάρες, στο υποσέλιδο και μέσα στον κώδικα της ανάρτησης. Αλλάξτε τις εικόνες μου και τις περιγραφές με τις δικές σας εικόνες και περιγραφές. Η θέση που θα εμφανίζεται η κάθε εικόνα αλλάξει εκεί που γράφει position: fixed; left:0px;top:28px; Δείτε πως εμφανίζονται οι 3 παρακάτω εικόνες που έχω βάλει σαν demo.

<style>

.photo1 {position: relative; width:234px;height:16px; background:#105105;color:#FFFFFF; font: 13px arial;margin:0;padding:0px; border: 1px solid #FFFF00;display: inline-block;}

.photo1:before {content: "ΛΕΥΚΑΔΑ ΠΟΡΤΟ ΚΑΤΣΙΚΙ"; font: 13px arial; background:#105105;color:#FFFFFF; }

.photo1:focus {pointer-events: none;}

.photo1:focus .photo1-content {visibility:visible;pointer-events: auto;}

.photo1-content {position: fixed; left:0px;top:28px;width:640px;height:auto;z-index:9999; visibility:hidden;margin:0;padding:0px;display: inline-block;}

</style>

<div tabindex="0" class="photo1"><ul class="photo1-content">

<img src="http://i.imgur.com/rcivwQJm.jpg" title="LEYKADA PORTO KATSIKI" alt="LEYKADA" width:640px; height:400px; /></ul></div>

<style>

.photo2 {position: relative; width:234px;height:16px; background:#173377;color:#FFFFFF; font: 13px arial;margin:0;padding:0px; border: 1px solid #FFFF00;display: inline-block;}

.photo2:before {content: "ΛΕΥΚΑΔΑ ΑΓΙΟΦΥΛΙ"; font: 13px arial; background:#173377;color:#FFFFFF; }

.photo2:focus {pointer-events: none;}

.photo2:focus .photo2-content {visibility:visible;pointer-events: auto;}

.photo2-content {position: fixed; left:400px;top:28x;width:640px;height:auto;z-index:9999; visibility:hidden;margin:0;padding:0px;display: inline-block;}

</style>

<div tabindex="0" class="photo2"><ul class="photo2-content">

<img src="http://i.imgur.com/wIBlr1Zm.jpg"  title="LEYKADA AGIOFYLI" alt="LEYKADA" width:640px; height:400px; /></ul></div>

<style>

.photo3 {position: relative; width:234px;height:16px; background:#760960;color:#FFFFFF; font: 13px arial;margin:0;padding:0px; border: 1px solid #FFFF00;display: inline-block;}

.photo3:before {content: "ΛΕΥΚΑΔΑ ΕΓΓΡΕΜΝΟΙ"; font: 13px arial; background:#760960;color:#FFFFFF; }

.photo3:focus {pointer-events: none;}

.photo3:focus .photo3-content {visibility:visible;pointer-events: auto;}

.photo3-content {position: fixed; left:800px;top:28px;width:640px;height:auto;z-index:9999; visibility:hidden;margin:0;padding:0px;display: inline-block;}

</style>

<div tabindex="0" class="photo3"><ul class="photo3-content">

<img src="http://i.imgur.com/H2PNDWBm.jpg" title="LEYKADA EGGREMNOI" alt="LEYKADA" width:640px; height:400px; /></ul></div>