Drop-Down Linkliste mit Inline Frame

  Letzte Änderungen
  Diese Seite drucken

von Dirk Metzmacher

Linklisten in einem Frameset gibt es häufig. Auf der linken Seite die anzuklickenden Links, auf der rechten Seite die gewünschten Seiten. Das kennt man. Eleganter und moderner wird es, wenn man ein Drop-down Menü mit einem Inline Frame verbindet.

Gleich zur Sache. Die "Bastelanleitung": Das folgende Formular und das Javascript gehören in die <body>-Sektion Ihrer Seite. Hier geht es zur LiveDemo.

Als erstes wird das Drop-down Menü mit den Links und der Funktion geh() aufgebaut. Bei einer Veränderung der Werte (onChange) oder nach einem Klick auf den Button wird diese Funktion aktiv.

<form name="spring">
<select name="droppi" size="1" onChange="geh()">
<option value="http://www.photoshop-tricks.de"
selected>Photoshop-Tricks.de</option>
<option value="http://www.google.de">Google</option>
<option value="http://www.yahoo.de">Yahoo.de</option>
<option value="http://www.drweb.de">Dr.Web</option>
</select><input type="button" name="test" value="Los !" onClick="geh()">
</form>

Das Javascript baut den Inline Frame auf und übernimmt die verschiedenen URLs aus dem Formular.

<script language="javascript">
<!--

Die Art der Anzeige wird durch die Variable anzeigemodus festgelegt. Wenn der anzeigemodus = 0 gewählt wurde, dann wird das Dokument in einem Inline-Frame angezeigt. Ist der anzeigemodus = 1, werden die Internetseiten in einem neuen Browser-Fenster geöffnet.

var anzeigemodus=0

Wurde der Anzeigemodus = 0 gesetzt, dann konfigurieren Sie hier die Inline-Frame Attribute, wie zum Beispiel die Größe. Hier wurde durch width:95% die Breite mit einer relativen Größe zum Bildschirm angegeben. Feste Werte (siehe height: 400px) sind aber auch möglich.

var iframecode='<iframe id="extern" style="width:95%;height:400px" src="http://www.photoshop-tricks.de"></iframe>'
if (anzeigemodus==0)
document.write(iframecode)

Die schon angesprochene Funktion geh() wird hier definiert. Die Variable gewaehlteurl nimmt die ausgewählten Links aus dem Formular auf. getElementById greift nun auf das Html-Element zu, das das id-Attribut extern besitzt. In diesem Fall ist das natürlich unser Inline FRames. In diesem Frame werden verschiedene Quellen (src=) angezeigt, bestimmt durch die Variable gewaehlteurl.

function geh(){
var gewaehlteurl=document.spring.droppi.
options[document.spring.droppi.selectedIndex].value
if (document.getElementById&&anzeigemodus==0)
document.getElementById("extern").src=gewaehlteurl
else if (document.all&&anzeigemodus==0)
document.all.extern.src=gewaehlteurl
else{
if (!window.win2||win2.closed)
win2=window.open(gewaehlteurl)
//else wenn win2 schon existiert
else{
win2.location=gewaehlteurl
win2.focus()
}
}
}
//-->
</script>

Netscape 6, der Internet Explorer ab 4.0 und Opera haben mit diesem Javascript kein Problem, nur Netscape 4 Benutzer müssen mit einem neuen Browser-Fenster vorlieb nehmen. (dm)