11 Δεκεμβρίου 2010



9 Rollover Εικόνα

Εάν περάσετε το ποντίκι σας πάνω από την εικόνα πιο κάτω, θα δείτε πως αλλάζει σε μια άλλη εικόνα.
Αυτό το εφέ, λέγεται Rollover Image. Θα προσπαθήσω να σας δώσω σήμερα με όσο πιο απλό και κατανοητό τρόπο γίνεται, τον τρόπο να το κάνετε κι εσείς, δηλαδή, όποιος το χρειαστεί, ..εννοείται.



Για να το πετύχετε, πρέπει οι δύο εικόνες που θα εναλάσονται μεταξύ τους, να έχουν ακριβώς ίδιες διαστάσεις.
Αυτό, μπορείτε να το πετύχετε με δύο τρόπους.
1. Αλλάζοντας το μέγεθος των εικόνων με κάποιο image ediding πρόγραμμα, ή
2. Αλλάζοντας τα μεγέθη των δύο εικόνων με μιας, βάζοντας τις μεταβλητές width και height. Προσωπικά, προτιμώ αυτόν τον τρόπο, διότι αλλάζω τις εικόνες σε όποιο μέγεθος εγώ επιθυμώ, και ισχύει αυτόματα και για τις δύο, χωρίς να χρειάζομαι κάποιο πρόγραμμα ή να αφιερώσω χρόνο που κάποιες φορές δεν έχω.
**Φυσικά, την 2η μέθοδο, δηλαδή την χρήση των δύο μεταβλητών, μπορείτε να την χρησιμοποιείτε για κάθε μετατροπή μεγέθους κάποιας εικόνας μέσα στο Blog σας, ανά πάσα στιγμή.

Πάμε να δούμε τώρα το σημερινό μας θέμα, που όπως είπα αφορά το Rollover image.
**Εννοείται πως έχετε δύο έτοιμες εικόνες, που θα χρησιμοποιήσετε. Ανεβάστε τις κάπου (π.χ. imagesack.us, flickr.com, picasa.com κ.λ.π και έχετε πρόχειρα κάπου τα λίνκ τους)

Αντιγράψτε τώρα τον παρακάτω κώδικα:

<a href="http://www.greekmaestro.com/html/contribute.html" target="_blank" onmouseout="if (document.images) document.distributor.src= 'http://img163.imageshack.us/img163/294/distributor.jpg';" onmouseover="if (document.images) document.distributor.src= 'http://img213.imageshack.us/img213/606/joini.png';"><img border="0" height="170px" name="distributor" src="http://img163.imageshack.us/img163/294/distributor.jpg" width="170px" /></a>

Επικολλήστε τον πρόχειρα στο WordPad η στο NotePad σας.
Αντικαταστήστε τώρα εσείς πολύ απλά, τα παρακάτω:
1. το http://www.greekmaestro.com/html/contribute.html με το λίνκ που θέλετε να οδηγηθεί όποιος πατήσει στην εικόνα.
2. το http://img163.imageshack.us/img163/294/distributor.jpg με το λινκ της 1ης εικόνας που θα φαίνεται συνεχώς απο την αρχή.
3. το http://img213.imageshack.us/img213/606/joini.png με το λινκ της 2ης εικόνας, η οποία θα εμφανίζεται μόλις περάσει κάποιος το ποντίκι του πάνω απο την 1η εικόνα.
4. το http://img163.imageshack.us/img163/294/distributor.jpg είναι ακριβώς το ίδιο με το 1. Θα ξαναβάλετε δηλαδή το 1ο λίνκ πάλι, ώστε, όταν ο επισκέπτης φύγει με το ποντίκι του από την εικόνα, να επανεμφανίσει την αρχική.
5. Αντικαταστήστε το 170 με έναν αριθμό της αρεσκείας σας αλλάζοντας το ύψος της εικόνας (height = ύψος)
6. Αντικαταστήστε το 170 με έναν αριθμό της αρεσκείας σας αλλάζοντας το πλάτος της εικόνας (width = πλάτος)
7. Αντιγράψτε τώρα τον έτοιμο πλέον κώδικα, και επικολλήστε τον όπου θέλετε στο ιστολόγιό σας. Είτε μέσα σε μια ανάρτηση, είτε στις πλαϊνές σας μπάρες.

Καλή επιτυχία.
Για τυχόν απορίες, ρωτήστε ελεύθερα στα σχόλια, δεν είναι ντροπή κάποιος να συναντήσει δυσκολία, ούτε να μην κατάλαβε κάτι.
Μπορεί για κάποιους να θεωρούνται απλά κάποια πράγματα, μα δεν είναι όλοι προχωρημένοι ούτε τόσο εξοικειωμένοι με θέματα HTML.




Print this post



Related Posts :



9 σχόλια:

TwistedTool είπε... Best Blogger Tips

Νίκο, η εικόνα που δείχνεις δεν κάνει rollover. Τουλάχιστο σε μένα δε δουλεύει. Ούτε και αυτή στη sidebar σου. Μήπως έκανες κανένα λαθάκι;

Νομίζω πρέπει να σημειώσουμε ότι το effect θα αργήσει λίγο να εμφανιστεί, ιδίως όταν οι εικόνες είναι μεγάλου μεγέθους. Αυτό συμβαίνει διότι με το που βάζουμε το mouse μας πάνω στην εικόνα, εκείνη την ώρα ξεκινά να φορτώνει η δεύτερη κι όσο μεγαλύτερη είναι, τόσο περισσότερο χρόνο θα πάρει.

Επίσης, Νίκο μου, στην εικόνα σου έγραψες το WRITE με δύο Τ. Ίσως θα ήθελες να το διορθώσεις.


pan de lees είπε... Best Blogger Tips

...κι εγω οταν μπηκα τη πρωτη φορα, δεν λειτουργουσε καμμια απο τις 2....τωρα που ξαναμπηκα, λειτουργει αυτη στη sidebar, σωστα (μηχανηματα του σατανα...τι περιμενεις ? οτι θελουν κανουν (χαχα)


DaisyCrazy είπε... Best Blogger Tips

Νίκο μου δυστυχώς δεν ξέρω αν λειτουργεί το κόλπο γιατί η εικόνα ακόμα φορτώνει μετά από 10 λεπτά που πάτησα ν'ανοιξω την ανάρτηση σου και δεν ελπίζω να ανοίξει και ποτέ...
Έχω καλή σύνδεση και νέο σχετικά λαπτοπι άρα μάλλον κάτι άλλο φταίει και είναι τα ζώα μου αργά.
Καληνύχτα


DaisyCrazy είπε... Best Blogger Tips

Όχι δε φορτώνει, ούτε κάνει αλλαγή καθόλου το ξαναδοκίμασα και σε εξπλορερ γιατί σκέφτηκα ότι μπορούσε να'φταιγε ο φάιρ φοξ... Χμ..


AATON είπε... Best Blogger Tips

TT, Daisy, δουλεύει αλλά επηρεάζεται απο το ίδιο σκρίπτ που έχω στην δεξιά μπάρα. Τέλος πάντων.
Τα δύο Τ ..χμ.. σωστά.
Ευχαριστώ ΤΤ


pan de lees είπε... Best Blogger Tips

Νικο...το προβλημα λυθηκε (με αφαίρεση)....απο τα ασιατικα μυαλα....


AATON είπε... Best Blogger Tips

Έτσι, εγώ θα σας δίνω προβλήματα, κι εσείς θα βρίσκετε λύσεις. Μ' αρέσει :)


Ανώνυμος είπε... Best Blogger Tips

Πώς άραγε δουλεύουν τα ρομποτάκια που δίνουν πλασματικές επισκεψιμότητες; ϊσως να μπορείες να μας διαφωτίσεις

http://24wro.blogspot.com/2010/12/blog-post_4588.html


Μάρκετ Κατσίγρας Γεώργιος είπε... Best Blogger Tips

Έκανα ένα ποστ στο δικό μου μπλογκ αλλά δεν ξέρω άμα δουλεύουν. Το λινκ μου:http://marketkatsigras.blogspot.com/2012/01/blog-post_12.html


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

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

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

Next Next Next