Teil 2: Javascript und Code-Snippets
- Javascript und Code-Snippets
- Teil 2: Javascript und Code-Snippets
Ergänzende Tooltips Das Skript Tooltips bindet beliebige HTML- Objekte als Mouse-Over-Pop-up ein. Speichern Sie die Dateien des Skript-Pakets in einem Unterverzeichnis tooltip und binden Sie das Javascript zu Beginn des -Bereichs ein: Möchten Sie lediglich einen Tooltip mit einem kurzen Text a...
Ergänzende Tooltips
Das Skript Tooltips bindet beliebige HTML- Objekte als Mouse-Over-Pop-up ein. Speichern Sie die Dateien des Skript-Pakets in einem Unterverzeichnis tooltip und binden Sie das Javascript zu Beginn des -Bereichs ein:
Möchten Sie lediglich einen Tooltip mit einem kurzen Text anbieten, dann orientieren Sie sich an dem folgenden Beispiel:
<script type="text/javascript" src=
"/tooltip/wz_tooltip.js"></script>Es lassen sich aber auch Inhalte mit Text und HTML-Objekten im Infofenster anzeigen. Fügen Sie dafür alles in einen
<a href="#" onmouseover="Tip
('kurzer Text')" onmouseout="UnTip()">Verlinkter Text</a>Das Tooltip binden Sie mit dem folgenden Link ein:
<div id="tt1">Inhalt mit Text und
Tags</div>Weitere Erläuterungen zu den zahlreichen Funktionen des Skripts liefert die Online-Dokumentation.
<a href="#" onmouseover="TagToTip
('tt1')" onmouseout="UnTip()">Verlinkter Text</a>Dynamische Eingabefelder
Eingabefelder in Online-Formularen sind häufig zu klein dimensioniert, lediglich ein kurzer Text ist vollständig zu sehen. Erhöhen Sie den Komfort für die Besucher, indem Sie solche Felder über zusätzliche kleine Pfeiltasten dynamisch erweitern lassen. Legen Sie das Textfeld mit Größenwerten und id-Parameter an:
Und fügen Sie unterhalb des Feldes die beiden Pfeilsymbole ein:
<textarea cols="40" rows="6" id=
"kommentar"></textarea>Mit Klick auf up.gif wird die Funktion weniger() mit dem Namen des Feldes aufgerufen, bei down.gif die Funktion mehr(). Definieren Sie die Funktionen mit den folgenden Skriptzeilen im -Bereich:
<a href="#" onClick="weniger
(,kommentar')"><img src="up.gif" width="16" height="16" border="0"></a><a href="#" onClick="mehr
(,kommentar')"><img src="down.gif" width="16" height="16" border="0"></a>Die Funktionen verkleinern und vergrößern das übergebene Feld um vier Zeilen.
<script type="text/javascript"><!--
function mehr(feld){document.
getElementById(feld).rows += 4;
}
function weniger(feld){
if (document.getElementById
(feld).rows > 9) document.getElementById(feld).rows -= 4;
}
//--></script>Bilder zoomen
Reicht der Platz für großformatige Bilder nicht aus, so bieten Sie alternativ eine Zoom-Funktion an. Schick wird das Ganze, wenn die Vorschau mit einem ansprechenden Effekt aufgezogen wird und einen besonderen Rahmen erhält. Das Skript Fancy Zoom erfüllt diese Wünsche. Entpacken Sie die Skriptdateien und laden Sie sie auf den Webserver hoch. Geben Sie die folgenden Verknüpfungen in den -Bereich ein:
Sie aktivieren die Zoom-Funktion über den Parameter onload="setupZoom()" beim -Tag. Erstellen Sie von den Bildern eine kleine und eine große Version und verlinken Sie diese auf die folgende Weise:
<script src="/js-glo
bal/FancyZoom.js" type="text/javascript"></script><script src="/js-global/
FancyZoomHTML.js" type="text/javascript"></script>Mit einem Klick auf die Vorschau erscheint elegant die große Version im Browser.
<a href="bildgross.jpg"><img src="bildklein.jpg" /></a>Lightbox-Effekt
Immer häufiger finden Sie auf Websites den sogenannten Lightbox-Effekt. Beim Klick auf ein kleines Vorschaubild wird die Webseite dunkel geschaltet und die Großansicht eines Fotos überlagert sie mit Transparenzeffekt. Das Skript Multibox) bietet diesen Effekt zusätzlich für Flash-Animationen, Videos und HMTL-Elemente an. Laden Sie den Inhalt des ZIP-Archivs in ein Verzeichnis auf Ihrem Webspace und schreiben Sie die folgenden Zeilen in den Kopf Ihrer Webseite:
Übertragen Sie den Code am besten aus einer der mitgelieferten Beispielseiten und ändern Sie gegebenenfalls die Pfade. Die Skript-Bibliotheken verlinken Sie mit
<link href="multibox/multibox.css" rel="stylesheet" type="text/css" /><!--[if lte IE 6]><link
rel="stylesheet" href="multibox/ie6.css" type="text/css" media="all" /><![endif]-->Auch hier sind die korrekten Pfade wichtig. Den Lightbox-Effekt für eine Grafik erhalten Sie mit:
<script type="text/javascript" src="_
common/js/mootools.js"></script><script type="text/javascript"
src="utils/overlay.js"></script><script type="text/javascript"
src="multibox/multibox.js"></script>Fügen Sie die folgenden Zeilen am Ende des -Bereichs ein:
<a href="bildgross.jpg" id="mb1"
class="mb" title="Text"><img src="bildklein.jpg" alt="Text"
border="0" /></a><div class="multiBoxDesc
mb1">Beliebiger Text und HTML-Elemente</div>Auf der Seite klein dargestellte Bilder, Videos und andere Inhalte lassen sich so elegant auf die volle Größe des Browserfensters aufziehen.
<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay:
true});});</script>
