Ads 468x60px

Τετάρτη, 25 Ιανουαρίου 2017

Rollovers Icons

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
δώσουμε έμφαση και χιούμορ στις φωτογραφίες μας με το rollover effect!Έχουμε
δει και παλιότερα σε ανάρτηση παρόμοιο script με φωτογραφίες εδώ σήμερα θα το
δούμε με εικονίδια!


Δείτε το παράδειγμα

Κάντε mouseover...





Η εγκατάσταση είναι πάρα πολύ απλή και μπορούμε να χρησιμοποιήσουμε 2 τρόπους:
1ος

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> ...............................................................................................................................................................

<center><script type="text/javascript">
// Pre load images for rollover
if (document.images) {
    smile = new Image;
    nosmile = new Image;

    smile.src = "https://lh3.googleusercontent.com/-__KROusL_PU/UMfBvr5xnAI/AAAAAAAACfM/NLhGod-cgl0/s95/emoticon-happy-128.png";
    nosmile.src = "https://lh6.googleusercontent.com/-rluANGp2laE/UMfBxuP4xMI/AAAAAAAACfs/S-rQTN0K6BU/s95/emoticon-sad.png";
}
function swapImage(thisImage,newImage) {
    if (document.images) {
        document[thisImage].src = eval(newImage + ".src");
    }
}
</script>  
<a href="/html/codes/" onmouseover="swapImage('jack','smile')" onmouseout="swapImage('jack','nosmile')"><img src="https://lh6.googleusercontent.com/-rluANGp2laE/UMfBxuP4xMI/AAAAAAAACfs/S-rQTN0K6BU/s95/emoticon-sad.png" width="100" height="100" border="0" name="jack" /></a></center>

...........................................................................................................................................................
 2ος
 Αντιγράψτε και επικολλήστε τον κώδικα στο HTML Section της εκάστοτε ανάρτησης!

ΑΛΛΑΓΕΣ 

Απλώς θα κάνετε αντικατάσταση και θα βάλετε τα url σας με τα δικά σας εικονίδια!Δύο διαφορετικά εικονίδια,
το 1 το βάζουμε στην διεύθυνση url του πράσινου φόντου, και το 2 το βάζουμε στην διεύθυνση
url του κίτρινου φόντου! Το 2 το βάζουμε 2 φορές!


Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to quackit.com



Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog