BUTTONS ΓΙΑ ONMOUSE OVER PHOTOS

Nέοι bloggers γειά σας !!!...Σήμερα σας έχω κάτι ξεχωριστό...Εφτιαξα buttons (πλήκτρα, κουμπιά) για gadgets, και θα σας δώσω ένα παράδειγμα πώς μπορείτε να τα κάνετε on mouse over (δηλ, να αλλάζει η όψη τους όταν βάζετε επάνω στα πλήκτρα τον κέρσορα (ποντίκι)...

Ο κώδικας είναι απλός...αντιγράψτε τον, και επικολλήστε τον κάπου για να τον χρησιμοποιήσετε αργότερα :

1.(image with hyperlink)(εικόνα με link)

<center><a href="URL ΔΙΕΥΘΥΝΣΗΣ LINK" target="_blank"><img onmouseover = 

"this.src = 'URL ΠΛΗΚΤΡΟΥ ΠΟΡΤΟΚΑΛΙ'" src = "URL ΠΛΗΚΤΡΟΥ ΓΚΡΙ "onmouseout 

=" this.src = 'URL ΠΛΗΚΤΡΟΥ ΓΚΡΙ' "style =" float: left; margin: 0 10px 5px 0; height: 30px; 

width: 150px; "/></a></center>

2.(image without hyperlink)(εικόνα χωρίς link)

<img onmouseover = "this.src = 'URL ΠΛΗΚΤΡΟΥ ΠΟΡΤΟΚΑΛΙ'" src = "URL ΠΛΗΚΤΡΟΥ ΓΚΡΙ"onmouseout =" this.src = 'URL ΠΛΗΚΤΡΟΥ ΓΚΡΙ' "style =" float: left; margin: 0 10px 5px 0; height: 30px; width: 150px; "/>

ΣΗΜΕΙΩΣΗ 1.Και στους 2 κώδικες υπάρχει ρύθμιση μεγέθους : height: 30px;  width: 150px;  το οποίο μπορείτε να προσαρμόσετε στις ανάγκες σας...

ΣΗΜΕΙΩΣΗ 2.Για κάθε γκρι πλήκτρο, υπάρχει το αντίστοιχο πορτοκαλί...

ΣΗΜΕΙΩΣΗ 3.Σαν βασικό (αρχικό) χρώμα βάζω το γκρι (αν θέλετε αλλάξτε το)...

ΣΗΜΕΙΩΣΗ 4.Κάντε download τις φωτογραφίες των πλήκτρων και "ανεβάστε" τις σε δικο σας host page, η κάντε δεξί κλικ σε μία φωτογραφία και κάντε "αντιγραφή διεύθυνσης url εικόνας" για κάθε εικόνα ξεχωριστά...

Για τον πρώτο κώδικα, δεν έχω να σας δείξω τίποτα, γιατί είναι ένας απλός κώδικας για ένα λίνκ που θέλετε να "στείλετε" τους επισκέπτες σας...

Για τον δεύτερο κώδικα έχω να σας προτείνω τον τρόπο hide / show που έχω χρησιμοποιήσει κι εγώ σε όλα τα blog μου, και κάνετε απίστευτη οικονομία χώρου, και χρόνου ανοίγματος του blog σας...Σας αναφέρω ξανά το ποστ που μπορείτε να πάρετε αναλυτικές πληροφορίες....Είναι του ΕΚΑΒΙΤΗ και θα το βρείτε εδώ : http://ekabitis-tips-tricks.blogspot.com/2010/03/hideshow-blog.html  

...Oρίστε ένα παράδειγμα απο τα δικά μου gadget π.χ. για ΤΙΤΛΟΥΣ ΕΙΔΗΣΕΩΝ και ΤΙΤΛΟΥΣ ΕΦΗΜΕΡΙΔΩΝ.....αντιγράψτε τον όπως σας τον δίνω, και θα δείτε το παράδειγμα ολοκληρωμένο :

...κάντε copy - paste σαν gadget:

<center><style type="text/css">

.commenthidden {display:none}

.commentshown {display:inline}

</style>

<script type="text/Javascript">

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }

} </script> <a name="table"></a>

<b> <a aiotitle="click to expand" href="javascript:togglecomments('lopikoName')"

><center><img onmouseover = "this.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4hu1XX3zXkIp5J_g_zUDiPe5B1tQiM9N8Cj_I5DFwPNytM6hdydse3I4nGnzw2wbLYXlf19n6FuBytVBfjCe7VYEmYOmIxyS3rC77EHdquI4bUw8fmOBRkPIFOGvF0RXni62KEaIKdcpo/s200/%25CE%25A4%25CE%2599%25CE%25A4%25CE%259B%25CE%259F%25CE%2599++2.gif'" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVblhs4BUSZ_8lYwg2TguiMxPFwSzONzAximaN-8yesJqArqc2KLP3UiLQY7ziS5U2YGU1muKCn9MzByaAqZF32RW7XNAVRuIRGVZhh0dVqFJ1cuRv7ARYcAZs1QUPo_5WLlBZQMawBxZ_/s200/%25CE%25A4%25CE%2599%25CE%25A4%25CE%259B%25CE%259F%25CE%2599+1.gif"onmouseout =" this.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVblhs4BUSZ_8lYwg2TguiMxPFwSzONzAximaN-8yesJqArqc2KLP3UiLQY7ziS5U2YGU1muKCn9MzByaAqZF32RW7XNAVRuIRGVZhh0dVqFJ1cuRv7ARYcAZs1QUPo_5WLlBZQMawBxZ_/s200/%25CE%25A4%25CE%2599%25CE%25A4%25CE%259B%25CE%259F%25CE%2599+1.gif' "style =" float: left; margin: 0 10px 5px 0; height: 30px; width: 150px; "/></center></a></b></center>

<div class="commenthidden" id="lopikoName"

><br/><br/><center>ΕΦΗΜΕΡΙΔΕΣ</center><center><iframe src="http://frontpages.gr/ticker.php?category=11&amp;controls=top&amp;bgcolor=080001" width="200" height="260" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe>

<center><span class="Apple-style-span"  style="color:#FFFF00;">..................................</span></center><center><span class="Apple-style-span"  style="color:#FFFF00;"><center><iframe src="http://www.cebil.gr/nticker.php?height=82&amp;width=212&amp;color=FFFF00&amp;bgcolor=000033&amp;textsize=3" width="220" height="90" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"> </iframe></center><div>

</div></span></center></center></div>

...δοκιμάστε το, κι αν σας αρέσει το αποτέλεσμα, συνεχίστε και με τα υπόλοιπα πλήκτρα να φτιάξετε κι άλλα hide/show gadgets...Αν χρειαστείτε κάποιο ειδικό πλήκτρο που θέλετε να σας φτιάξω, απλά αφήστε μήνυμα στο cbox (chat) η  e-mail, και εγώ θα προσθέσω αυτό το πλήκτρο σαν συνέχιση αυτής της ανάρτησης...

BUTTONS EΙΔΙΚΗ ΠΑΡΑΓΓΕΛΙΑ:

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!...