ΚΩΔΙΚΑΣ ΓΙΑ MOUSEOVER ΚΑΙ MOUSEOUT ΣΕ ΦΩΤΟΓΡΑΦΙΕΣ
Με τον παρακάτω κώδικα μπορούμε να περνάμε το ποντίκι μας πάνω από μία φωτογραφία και να εμφανίζεται μία δεύτερη φωτογραφία και μετά να το απομακρύνουμε από αυτήν και να εμφανίζεται η πρώτη φωτογραφία. Βάλτε τα link των εικόνων σας στη θέση των μώβ link και προσέξτε να βάλετε σωστά τα μονά και τα διπλά αυτάκια στην αρχή και στο τέλος των links. Τις διαστάσεις των εικόνων τις αλλάζετε εκεί που γράφει width: 232px; height: 145px;
Με τον παρακάτω κώδικα μπορούμε να περνάμε το ποντίκι μας πάνω από μία φωτογραφία και να εμφανίζεται μία δεύτερη φωτογραφία και μετά να το απομακρύνουμε από αυτήν και να εμφανίζεται η πρώτη φωτογραφία. Βάλτε τα 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;"/>
ΦΙΛΕ ΜΟΥ ΜΠΟΡΕΙΣ ΝΑ ΜΟΥ ΠΕΙΣ ΣΕ ΠΑΡΑΚΑΛΩ ΠΩΣ ΦΤΙΑΧΝΩ ΤΟ LINK ΑΠΟ ΜΙΑ ΕΙΚΟΝΑ..Π.Χ.https://lh3.googleusercontent.com/-0gA.......
ΑπάντησηΔιαγραφήΣΕ ΕΥΧΑΡΙΣΤΩ!!
Τα λίνκ αυτού του τύπου είναι απο το 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 σε μικρότερο ή μεγαλύτερο.
ΔιαγραφήΝΑ ΕΙΣΑΙ ΠΑΝΤΑ ΚΑΛΑ ΚΑΙ ΣΕ ΕΥΧΑΡΙΣΤΩ ΠΟΛΥ!!!ΜΠΡΑΒΟ ΣΟΥ ΓΙΑ ΤΗΝ ΠΟΛΥ ΩΡΑΙΑ ΔΟΥΛΕΙΑ ΣΟΥ!ΣΟΥ ΕΥΧΟΜΑΙ ΚΑΛΕΣ ΓΙΟΡΤΕΣ ΚΑΙ ΠΑΝΤΑ ΜΕ ΥΓΕΙΑ!!!!!
ΔιαγραφήΜπορείς σε παρακαλώ να μου πείς πώς θα επιτύχω, όταν κάνω Mouseover πάνω από μια λέξη
ΑπάντησηΔιαγραφήή μια εικόνα που είναι μέσα στην blogspot σελίδα μου, να εμφανίζεται ένα μικρό παράθυρο
με περισσότερες πληροφορίες για το θέμα μου και να εξαφανίζεται μετά την απομάκρυνση του mouse?
ευχαριστώ πολύ
Δες την 1η αναρτηση που εμφανίζεται αυτή τη στιγμή στην κατηγορία TEXT BOXES και αν δεν σε καλύπτει δες και αυτήν. http://the-best-widgets.blogspot.gr/2016/01/image-enlarge.html
ΔιαγραφήΧρησιμοποίησα τους 2 κώδικες (μία στο τέλος της ανάρτησης) και μία στο σημείο που με ενδιαφέρει, όπως μου πρότεινες και χρησιμοποιώντας ένα δεύτερο site του Blogspot, όπου θα βάζω τις πληροφορίες που θέλω να εμφανίζονται στο 1ο blogspot site.
ΔιαγραφήΌταν κάνω mouseclick στην κεντρική σελίδα, μου φέρνει σε νέο παράθυρο την πληροφορία, αλλά αυτό καταλαμβάνει όλη την οθόνη και μου σκεπάζει την αρχική σελίδα.
Πώς μπορώ να ρυθμίσω το πλάτος και ύψος του πληροφοριακού παράθυρου?
σε ευχαριστώ ακόμα μία φορά
Αλλαξε το width και το height που θα βρείς μέσα στο δεύτερο κώδικα. Δες σε αυτώ το screen shout που βρίσκεται. http://i.imgur.com/vxWBS0B.png
ΔιαγραφήΔυστυχώς φίλε μου, έχω πειράξει και αυτά τα μεγέθη των width & height αλλά το πληροφοριακό παράθυρο συνεχίζει να καταλαμβάνει όλη την οθόνη. Δεν ξέρω τι άλλο να φανταστώ και τι να κάνω.
ΔιαγραφήΥπάρχει περίπτωση το βοηθητικό site που περιέχει τις πληροφορίες να έχει κάποια ρύθμιση ώστε όταν καλείται από την κεντρική σελίδα να μην ανοίγει τα παράθυρα του σε maximize?
Αν σκεφτείς κάτι, θα το εκτιμούσα πολύ.
Έχεις πολύ καλό site με πάρα πολύ καλά κόλπα.
ευχαριστώ και πάλι
Καλό θα ήταν να μιλούσαμε με κάποιο link να έβλεπα και το blog σου και που ακριβώς έχεις βάλει τον κώδικα μήπως λείπει κάτι γιατί δεν δικαιολογήται να μην ρυθμίζεται το παράθυρο. Στείλε μήνυμα με link απο mozzila hello να μιλήσουμε να τελίωνει αυτό το πρόβλημα και ότι άλλο έχεις και να μην γράφουμε και χρονοτριβούμε.
Διαγραφήτελικά χρησιμοποίησα στον κώδικα Button αντί για κείμενο και λύθηκε το πρόβλημα.
ΔιαγραφήΜπορώ να ελέγξω το πλάτος και ύψος.
Σε ευχαριστώ πολύ για όλα.