Pfiffige Lösungen bei Platznot

Teil 2: Javascript und Code-Snippets

  1. Javascript und Code-Snippets
  2. 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 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

-Abschnitt ein und benennen Sie diesen mit dem id-Parameter wie folgt:
<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:

Webdesign: Javascript und Code-Snippets

© Archiv

Fancy Zoom: Lassen Sie ein platzsparendes Thumbnail mit einem Klick groß anzeigen.

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:

Webdesign: Javascript und Code-Snippets

© Archiv

Multibox: Der Lightbox-Effekt zeigt neben Bildern auch Videos und HTML-Inhalte über der Seite an.

Ü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>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".