Hide-Show Buttons

HIDE/SHOW (button+image)

Φίλοι bloggers, ο κώδικας που σας δίνω παρακάτω, βοηθά στην εξοικονόμηση χώρου στο blog σας, μιας και μπορείτε να «κρύψετε» διάφορα link , κείμενα, εικόνες κλπ κλπ και με ένα κουμπί, η φράση, να παρουσιάζονται από κάτω !!!!


ΤΟ SCRIPT: 

 <script language="javascript">

 <!--
 var state = 'none';function showhide(layer_ref) 
{if (state == 'block') {

 state = 'none';
 }
 else {
 state = 'block';
 }
 if (document.all) { //IS IE 4 or 5 (or 6 beta)
 eval( "document.all." + layer_ref + ".style.display = state");
 }
 if (document.layers) { //IS NETSCAPE 4 or below
 document.layers[layer_ref].display = state;
 }
 if (document.getElementById &&!document.all) {
 hza = document.getElementById(layer_ref);
 hza.style.display = state;
 }
 }
 //-->
 </script>

O ΚΩΔΙΚΑΣ  HTML: (παρουσιάζει button και εικόνα)

 <p><a href="##" onclick="showhide('div1');"><img src="ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ URL ΤΟΥ BUTTON" height="24" width="144" /></a></p>

 <div id="div1" style="display: none;"><img src="ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ URL ΤΗΣ ΕΙΚΟΝΑΣ" height="150" width="230" /></div>

ΕΠΕΞΗΓΗΣΕΙΣ:
***καθε φορά που θέλετε να βάλετε κι άλλο κουμπί με hide/show θα επαναλαμβάνετε το κώδικα html, αλλά θα βάζετε άλλο αριθμό «div» …..δηλαδή :

  ('div1')  ('div2')  ('div3')

…(και τα δυο div θα αλλάζετε)
***Mε μπλε γράμματα οι διαστάσεις button (κουμπί)  και image (εικόνα)
***Αν θέλετε να κρύψετε ένα κείμενο (αντί για εικόνα) αντικαταστήστε το κώδικα με το κόκκινο φόντο, με το κείμενο που θέλετε να βάλετε…
***όταν τα ανοίγετε όλα μαζί, παρουσιάζει μια μικρή «ιδιαιτερότητα» …πρέπει να πατηθεί 2 φορές για να ανοίξει η να κλείσει …(πιστεύω οτι δεν είναι τόσο σημαντικό για κάποιον που χρειάζεται οπωσδήποτε έναν κώδικα hide-show)….