Tutorials – PopUps
PopUps begegenen uns im Web hauptsächlich als nervige Werbung. Sie können aber auch sehr nützlich sein. Ich persönlich finde sie sehr praktisch, um zusätzliche Informationen oder Großansichten von Bildern elegant zu präsentieren.
PopUps programmiert man mit JavaScript. Wo man das Script im HTML-Dokument platziert, ist eigentlich egal. Programmierer
haben sich jedoch der übersichtlichkeit halber geeinigt, es zwischen <head> und </head> zu setzen.
Wie folgt sieht das Script für ein PopUp aus (das ist nur eine Variante, es gibt viele verschiedene Möglichkeiten):
<script language="JavaScript" type="text/JavaScript">
<!--
function popup(ziel)
{
window.open(ziel,"popup","width=500,height=300,resize=yes,scrollbars=yes");
}
//-->
</script>
Erklärung:
"<script language="JavaScript" type="text/JavaScript">"
leitet ein JavaScript ein
"function popup(ziel)"
ruft die Funktion "popup" auf, wobei für "popup" auch jedes andere Wort stehen könnte
"window.open(ziel,"popup","width=500,height=300,resize=yes,scrollbars=yes");"
- "window.open" ist ein festgelegter Befehl, um ein neues Fenster zu öffnen
- "popup" ist der name des neuen Fensters
- "width=500,height=300,resize=yes,scrollbars=yes" sind diverse Attribute, die man dem neuen Fenster zuordnen kann: "width" ist die breite in Pixeln, "height" beschreibt die Höhe in Pixeln, "resize" erlaubt das Fenster später zu vergrößern/verkleinern und "scrollbars" aktiviert bei Bedarf eine Scrollleiste. Wenn man statt "yes" "no" einsetzt, werden die entsprechenden Attribute nicht ausgeführt.
"</script>"
beendet das Script
Nun platzieren wir einen Link im Text, der bei Klick das PopUp öffnen soll. Ein normaler Link, der sich in einem neuen Fenster öffnet, sieht so aus:
<a href="seite.html" target="_blank">klick mich</a>
Wir fügen diesem Link nun noch den Event-Handler "onclick" hinzu, in dem das PopUp aufgerufen wird:
<a href="seite.html" target="_blank" onclick="popup('seite.html'); return false">klick mich</a>
Erklärung:
"a href="seite.html" target="_blank""
ruft ganz normal den Link auf, bei PopUps sorgt das dafür, dass der Link auch bei ausgeschaltetem JavaScipt geöffnet wird
"onclick"
das ist der Event-Handler
"popup('seite.html')"
Bewirkt, dass das JavaScript "popup", welches im <head>-Bereich festgelegt wurde, ausgeführt wird und die Seite "seite.html" öffnet. Habt ihr dem Script oben bei "function popup(ziel)" einen anderen Namen gegeben, muss natürlich dieser aufgerufen werden.
"return false"
verhindert, dass der Browser im ursprünglichen Fenster ebenfalls "seite.html" öffnet.
und so sieht das ganze dann aus:
klick mich
© since 2002 by Otaku-Welt.de