Ads 468x60px

Πέμπτη, 22 Σεπτεμβρίου 2016

Pictures with drop down menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να φτιάξουμε
εικόνες σε drop down menu, το οποίο θα ανοίγει σε pop up παράθυρο!Είναι ένα script
πως μας εξοικονομεί και μας γλυτώνει πολύ χώρο στην σελίδα μας!Μπορείτε να βάλετε
εικόνες η σημειώσεις, μικρά κείμενα κτλ!






Δείτε εδώ το DEMO



Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτό...

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

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
.................................................................................................................................................
<SCRIPT language="JavaScript">

/*
Script posted and featured on JavaScript Kit
http://javascriptkit.com
*/

function display_image(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,
copyhistory=0,width=400,height=350");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +
selectionname + "</FONT></B><HR>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC='" + selection + "'>");
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
    }
</SCRIPT>


<FORM>
<select NAME="imagename" onChange="display_image(this.form)">
<option value="ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ" SELECTED>ΕΔΩ 
ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ ΣΑΣ
<option value="
ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ">
ΕΔΩ 
ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ ΣΑΣ
<option value="ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ">
ΕΔΩ 
ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ ΣΑΣ
</select>
</FORM>
.............................................................................................................................................................
ΑΛΛΑΓΕΣ 
 width=400,height=350"Αυξάνοντας το 400 μεγαλώνει σε πλάτος το pop up και το αντίστροφο!
Αυξάνοντας το 350 μεγαλώνει σε μήκος το pop up και το αντίστροφο!

Βάζετε διεύθυνση εικόνας και τον τίτλο τους στα αντίστοιχα σημεία του κώδικα και 
πατάτε Αποθήκευση!Αυτό ήταν!

Εάν θέλετε να βάλετε και άλλες διευθύνσεις, τότε κάτω από την τρίτη επιλογή και 
πριν το </select> επαναλαμβάνεται αυτή την γραμμή κώδικα:

<option value="ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ">ΕΔΩ ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ ΣΑΣ

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



Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog