Jürgen Schilling - Natur | Fotografie | Technik .

 

JürgenSchilling

Natur | Fotografie | Technik

 
 

 Home

 Black&White
 Cyanotypie
 Fotogramme
 Infrarot
 Jägerprüfung
 Kategorien
 Kirlianfotografie
 Lochkamera
 Makroaufnahmen



Lightbox


 Manuals:
 
Alle Manuals
 Aluminium eloxieren
 Hochspannungsgenerator
 Belichtungszeitentabelle
 Beurteilung v. Negativen
 Blitzlichtfotographie
 Farbmischung
 Filmentwicklung
 Infrarotfotografie
 Teslatrafo
 Teslatrafo Rechner
 Schrauben u. Gewinde

 Entwicklingszeiten:
 Agfa Rodinal
 Kodak D76

 Tiefenschäferechner

 
 Impressum


______

















  
  Bilder pro Gast
  phpMyAdmin
  Counter
  Most viewed
  Logout
  Login
  Theme curve
  Theme my-fruity

Ein DropDown Menü für HTML-Links basteln. -  Hier am Beispiel meiner Coppermine Startseite

Es soll ein Drop Down Feld definiert werden, in dem HTML-Links ausgeführt werden. Normale Textfelder interpretieren die Browser als Text.
Die Links nebst Code werden in der Textbox nur als Text dargestellt und es lassen mit ihnen auch keine Webseiten öffnen.
Mit ganz einfachen Java Scripts kann dem abgeholfen werden:


Es gibt drei Möglichkeiten für die DropDown Felder:

1) Ein einzeiliges DropDown Feld, bei dem zum starten des Links ein Knopf geklickt werden muß.
2) Ein mehrzeiliges DropDown Feld mit Scrollbalken, bei dem zum starten des Links ein Knopf geklickt werden muß.
3) Ein mehrzeiliges DropDown Feld mit Scrollbalken, bei dem der Link direkt angeklickt werden kann.


Auf meiner Seite habe ich Version Nr. 3) verwendet. Version 1) + 2) sind von mir getestet und funktionieren. Lediglich testen kann man sie in dieser Doku nicht,
da ich das entsprechende Javascript nicht in das Produktivsystem übernommen habe.



1) Ein einzeiliges DropDown Feld, bei dem zum starten des Links ein Knopf geklickt werden muß.

Um das zu realisieren ist ein kleines JavaScript notwendig, das in den <HEAD>  </HEAD> kopiert wird.
Dann kann an einer beliebigen Stelle der Seite ein Webformular definiert werden.


Aussehen und funktionieren soll das Fenster so:

Code:

Diesen Javacode in die <HEAD>  </HEAD> Sektion der /webroot/themes/my-theme/template.html kopieren:

 
<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>


Dann ein Webformular nach folgendem Muster bauen und an die gewünschte Stelle kopieren:

<b><font face="Arial" size="2">Updates:</font></b>
<FORM METHOD=POST onSubmit="return dropdown(this.gourl)">
<p>
<SELECT NAME="gourl">

<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=-andechs-kloster-20090813"> 13.08.2009 Kloster Andechs </OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=*Astrophytum-capricome-20090809" >09.08.2009 Macros von Astrophytum capricome </OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=austria*20090805" >05.08.2009 Bergtouren in Mittersill und Pr&aulm;graten "</OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=Schildenstein+20090801" >01.08.2009 Tour auf den Schildenstein "</OPTION VALUE>
<OPTION VALUE="" > </OPTION VALUE>
<OPTION VALUE="" > </OPTION VALUE>



</SELECT>

<INPUT TYPE=SUBMIT VALUE="Go">
</p>
</FORM>
 




2) Ein mehrzeiliges DropDown Feld mit Scrollbalken, bei dem zum starten des Links ein Knopf geklickt werden muß.

In dem Webformular einen "Submit" Knopf mit einem Bild hinterlegen, in das DropDown-Feld einen Scrollbalken einbauen
und den Curser beim überstreichen des Knopfes zu einer "Hand mit Zeigefinger" machen:

So soll es ausschauen:

     


Code:
Diesen Javacode in die <HEAD>  </HEAD> Sektion der /webroot/themes/my-theme/template.html kopieren:

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>


Dann wiederum ein Webformular nach folgendem Muster bauen und an die gewünschte Stelle kopieren:

<FORM METHOD=POST onSubmit="return dropdown(this.gourl)">

<SELECT NAME="gourl" size="4" style="border: 1px solid #000000; background-color:F7F7F7">


<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=-bad-feilenbach-Hochsalwand-20090820.jpg">20.08.2009 Tour auf die Hochsalwand und die Rampoldplatte im Mangfallgebirge </OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=*macro*Echinocereus-pectinatus-var-rubrispinus-20090819.jpg" >19.08.2009 Macroaufnahmen eines Echinocereus pectinatus Kaktuses</OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=*macro*Echinopsis-02-20090818.jpg" >18.08.2009 Macroaufnahmen eines Echinopsis Kaktuses</OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=-andechs-kloster-20090813">13.08.2009 Kloster Andechs </OPTION VALUE>

</SELECT>

<button type="SUBMIT" style="width: 70px; height: 69px; border: 1px solid #000000; background-color: #F7F7F7; cursor: hand">
<img src="images/apply.png" width="15" height="15" align="left">Submit</button>

</FORM>

 

size="4" - zeigt 4 Zeilen in dem DropDown Menu an un erzeut für alle übrigen Einträge einen Scrollbalken.
cursor: hand
  - macht den Curser bei überstreichen zu einer "Hand mit Zeigefinger"
<img src="images/apply.png" width="15" height="15" align="left">Submit</button> - hinterlegt den Knopf mit einem Bild mit 15 x 15 Pixel





3) Ein mehrzeiliges DropDown Feld mit Scrollbalken, bei dem der Link direkt angeklickt werden kann.

Hier Möglichkeit, bei der man den Hyperlink gleich direkt doppelklicken kann ohne auf das "Submit" Feld zu klicken.
Das Javascript aus 1) und 2) wird hierbei nicht benötigt.

So soll es ausschauen:

Code:
Diesen Code einfach an die Stelle kopieren, an der das Formular auftauchen soll:


<select name="Manual" size="4" onchange="window.open(this.options[this.selectedIndex].value,'_top')">

<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=*macro*Echinocereus-pectinatus-var-rubrispinus-20090819.jpg" >19.08.2009 Macroaufnahmen eines Echinocereus pectinatus Kaktuses</OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=*macro*Echinopsis-02-20090818.jpg" >18.08.2009 Macroaufnahmen eines Echinopsis Kaktuses</OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=-andechs-kloster-20090813">13.08.2009 Kloster Andechs </OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=*Astrophytum-capricome-20090809" >09.08.2009 Macros von Astrophytum capricome </OPTION VALUE>
<OPTION VALUE="./thumbnails.php?album=search&type=full&plugin_search_album=true&search=austria*20090805" >05.08.2009 Bergtouren in Mittersill und Pr&auml;graten </OPTION VALUE>
<OPTION VALUE="" > </OPTION VALUE>
<OPTION VALUE="" > -----------------------------------------------------------------------

</select>
 




© J.Schilling 21.08.2009

 - - - By CrazyStat - - -