• 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

ΚΩΔΙΚΑΣ ΓΙΑ MOUSEOVER ΚΑΙ MOUSEOUT ΣΕ ΦΩΤΟΓΡΑΦΙΕΣ

MOUSE OVER MOUSE OUT
ΚΩΔΙΚΑΣ ΓΙΑ MOUSEOVER ΚΑΙ MOUSEOUT ΣΕ ΦΩΤΟΓΡΑΦΙΕΣ
Με τον παρακάτω κώδικα μπορούμε να περνάμε το ποντίκι μας πάνω από μία φωτογραφία και να εμφανίζεται μία δεύτερη φωτογραφία και μετά να το απομακρύνουμε από αυτήν και να εμφανίζεται η πρώτη φωτογραφία. Βάλτε τα link των εικόνων σας στη θέση των μώβ link και προσέξτε να βάλετε σωστά τα μονά και τα διπλά αυτάκια στην αρχή και στο τέλος των linksΤις διαστάσεις των εικόνων τις αλλάζετε εκεί που γράφει width: 232px; height: 145px;

<img onmouseover = "this.src = 'http://i.imgur.com/gCr4ycDm.jpg'" src = 'http://i.imgur.com/rcivwQJm.jpg' onmouseout = "this.src = 'http://i.imgur.com/rcivwQJm.jpg'" style ="float: left; margin:0; width: 232px; height: 145px;"/>
<img onmouseover = "this.src = 'http://i.imgur.com/Pq9Dexam.jpg'"  src = 'http://i.imgur.com/7X4wjWSm.jpg' onmouseout = "this.src = 'http://i.imgur.com/7X4wjWSm.jpg'" style ="float: left; margin:0; width: 232px; height: 145px;"/>
<img onmouseover = "this.src = 'http://i.imgur.com/RFCOlG3m.jpg'" src = 'http://i.imgur.com/dtSJzqnm.jpg' onmouseout = "this.src = 'http://i.imgur.com/dtSJzqnm.jpg'" style ="float: left; margin:0; width: 232px; height: 145px;"/>
<img onmouseover = "this.src = 'http://i.imgur.com/fiVofHIm.jpg'"  src = 'http://i.imgur.com/I9SFA0sm.jpg' onmouseout = "this.src = 'http://i.imgur.com/I9SFA0sm.jpg'" style ="float: left; margin:0; width: 232px; height: 145px;"/>

10 σχόλια:

  1. ΦΙΛΕ ΜΟΥ ΜΠΟΡΕΙΣ ΝΑ ΜΟΥ ΠΕΙΣ ΣΕ ΠΑΡΑΚΑΛΩ ΠΩΣ ΦΤΙΑΧΝΩ ΤΟ LINK ΑΠΟ ΜΙΑ ΕΙΚΟΝΑ..Π.Χ.https://lh3.googleusercontent.com/-0gA.......
    ΣΕ ΕΥΧΑΡΙΣΤΩ!!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Τα λίνκ αυτού του τύπου είναι απο το google+. Τώρα το google έκανε αλλαγές και για να τα βρείς πρέπει να επιστρέψεις στην παλιά έκδοση του google+. Επειδή όμως οι ίδιες φωτογραφίες του google+ εμφανίζοντε και στο picasa πήγαινε στο picasa αφού είσαι συνδεδεμένος με το λογαριασμο google και μπές σε όποιο άλμπουμ θέσλεις πάτα πάνω σε μία φωτογραφία για να προβληθεί μόνη της σε μεγαλύτερη διάσταση και μετά πάτα δεξί κλικ πάνω της και επέλεξε αντιγραφή διεύθυνσης εικόνας. Αυτό το url μιλαζει με το url του google+ με την διαφορά ότι δεν έχει στο τέλος το ύψος το οποίο αν αλλάξεις το πλάτος προσαρμόζεται μόνο του. Δές ένα λινκ απο το picasa https://lh3.googleusercontent.com/-Kiipxjcscqg/VnOjJh3P_DI/AAAAAAAASQU/83jgA9O2iaw/s1024-Ic42/2014-01-11%25252013.03.20%252520iPhone%2525204S.jpg Για να της αλλάξεις διάσταση αλλάζεις το 1024 σε μικρότερο ή μεγαλύτερο.

      Διαγραφή
    2. ΝΑ ΕΙΣΑΙ ΠΑΝΤΑ ΚΑΛΑ ΚΑΙ ΣΕ ΕΥΧΑΡΙΣΤΩ ΠΟΛΥ!!!ΜΠΡΑΒΟ ΣΟΥ ΓΙΑ ΤΗΝ ΠΟΛΥ ΩΡΑΙΑ ΔΟΥΛΕΙΑ ΣΟΥ!ΣΟΥ ΕΥΧΟΜΑΙ ΚΑΛΕΣ ΓΙΟΡΤΕΣ ΚΑΙ ΠΑΝΤΑ ΜΕ ΥΓΕΙΑ!!!!!

      Διαγραφή
  2. Μπορείς σε παρακαλώ να μου πείς πώς θα επιτύχω, όταν κάνω Mouseover πάνω από μια λέξη
    ή μια εικόνα που είναι μέσα στην blogspot σελίδα μου, να εμφανίζεται ένα μικρό παράθυρο
    με περισσότερες πληροφορίες για το θέμα μου και να εξαφανίζεται μετά την απομάκρυνση του mouse?
    ευχαριστώ πολύ

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Δες την 1η αναρτηση που εμφανίζεται αυτή τη στιγμή στην κατηγορία TEXT BOXES και αν δεν σε καλύπτει δες και αυτήν. http://the-best-widgets.blogspot.gr/2016/01/image-enlarge.html

      Διαγραφή
    2. Χρησιμοποίησα τους 2 κώδικες (μία στο τέλος της ανάρτησης) και μία στο σημείο που με ενδιαφέρει, όπως μου πρότεινες και χρησιμοποιώντας ένα δεύτερο site του Blogspot, όπου θα βάζω τις πληροφορίες που θέλω να εμφανίζονται στο 1ο blogspot site.
      Όταν κάνω mouseclick στην κεντρική σελίδα, μου φέρνει σε νέο παράθυρο την πληροφορία, αλλά αυτό καταλαμβάνει όλη την οθόνη και μου σκεπάζει την αρχική σελίδα.
      Πώς μπορώ να ρυθμίσω το πλάτος και ύψος του πληροφοριακού παράθυρου?

      σε ευχαριστώ ακόμα μία φορά

      Διαγραφή
    3. Αλλαξε το width και το height που θα βρείς μέσα στο δεύτερο κώδικα. Δες σε αυτώ το screen shout που βρίσκεται. http://i.imgur.com/vxWBS0B.png

      Διαγραφή
    4. Δυστυχώς φίλε μου, έχω πειράξει και αυτά τα μεγέθη των width & height αλλά το πληροφοριακό παράθυρο συνεχίζει να καταλαμβάνει όλη την οθόνη. Δεν ξέρω τι άλλο να φανταστώ και τι να κάνω.
      Υπάρχει περίπτωση το βοηθητικό site που περιέχει τις πληροφορίες να έχει κάποια ρύθμιση ώστε όταν καλείται από την κεντρική σελίδα να μην ανοίγει τα παράθυρα του σε maximize?
      Αν σκεφτείς κάτι, θα το εκτιμούσα πολύ.
      Έχεις πολύ καλό site με πάρα πολύ καλά κόλπα.

      ευχαριστώ και πάλι

      Διαγραφή
    5. Καλό θα ήταν να μιλούσαμε με κάποιο link να έβλεπα και το blog σου και που ακριβώς έχεις βάλει τον κώδικα μήπως λείπει κάτι γιατί δεν δικαιολογήται να μην ρυθμίζεται το παράθυρο. Στείλε μήνυμα με link απο mozzila hello να μιλήσουμε να τελίωνει αυτό το πρόβλημα και ότι άλλο έχεις και να μην γράφουμε και χρονοτριβούμε.

      Διαγραφή
    6. τελικά χρησιμοποίησα στον κώδικα Button αντί για κείμενο και λύθηκε το πρόβλημα.
      Μπορώ να ελέγξω το πλάτος και ύψος.
      Σε ευχαριστώ πολύ για όλα.

      Διαγραφή

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

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