|
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ägraten </OPTION
VALUE>
<OPTION VALUE="" > </OPTION VALUE>
<OPTION VALUE="" >
-----------------------------------------------------------------------
</select>
|
© J.Schilling 21.08.2009
|