Quickies sind nützliche, kleine Tipps, Tricks und Gimmicks, Ihre Webseite in wenigen, einfachen Schritten etwas aufzupeppen.
Der Internet Explorer zieht ab Version 5 jeweils einen gepunkteten Rahmen um angeklickte Links.
Alle Links, bei denen der Rahmen verschwinden soll, erweitern Sie mit onclick="javascript:this.blur()"
Beispiel: <A HREF="meinlink.htm" onclick="javascript:this.blur()">MeinLink</A>
Wenn Sie Ihre Besucher automatisch auf eine andere Seite umleiten möchten, verwenden Sie dazu den folgenden Meta- Tag, der in den Head- Bereich Ihrer Seite(n) eingesetzt wird.
<meta http-equiv="refresh" content="20; url=http://www.eineseite.de">
Im Beispiel wird nach 20 Sekunden auf die bezeichnete Seite weitergeleitet.
Hinweis: META-Tags werden in den Bereich zwischen <HEAD> und </HEAD> geschrieben. Tip: Erfahren Sie hier mehr über Meta-Tags.
Wir bieten zwar einige Scripts in unserem Archiv an, welche die Funktion der rechten Maustaste und somit das dazugehörige Kontextmenu deaktivieren, aber wer es wirklich auf Datenklau anlegt, der umschifft diese Klippe mit relativ wenig Aufwand.
Besonders Bilder sind beliebte Objekte des Selbstbedienungsladens WWW. Das folgende Beispiel, einfach wie raffiniert, zeigt, wie man Grafikdieben das Leben etwas schwerer macht.
Kopieren Sie sich einmal folgende Grafik und sehen sich danach an, was Sie sich in Wirklichkeit auf die Platte geladen haben.
Richtig, was Sie sich downloaden, ist lediglich eine transparente Grafik in den Massen 1x1 Pixel.
Der Trick dabei ist folgender:
Sie wollen, dass Ihre Webseite jeweils neu vom Webserver geladen wird und nicht aus dem Browser-Cache? Dies erreichen Sie mit einem META- Befehl.
<META HTTP-EQUIV="expires" CONTENT="0">
Mit folgendem, kleinen Script können Sie das aktuelle Datum in Ihrer Webseite anzeigen:
<script language="JavaScript"> Zeit = new Date; Datum = Zeit.getDate()+"."+(Zeit.getMonth()+1)+"."+Zeit.getYear(); document.write(Datum); </script>
Beispiel gefällig? Das heutige Datum:
... Na, stimmts? :-) Netscape 4-User werden diese Frage sicherlich verneinen, denn anstelle von bspw. 2000 wird Ihr Browser 100 anzeigen. Unser Tip: Verwenden Sie einen Browser, der das aktuelle Jahr erkennt und nicht, wie Netscape, die Differenz in Jahren seit 1900. ;-)
Cascading Style Sheets machen diesen Effekt möglich. Fügen Sie dem jeweiligen Formular- Tag jeweils den Zusatz style="<Attribut>" hinzu, bspw. <input style="background-color: #00468C">
Weitere Informationen zu Style- Sheets finden Sie hier
Wenn wir den Bogen des vorangegangenen Beispiels noch etwas weiterspannen und Eventhandler einsetzen, lässt sich die Farbe von Eingabefeldern dynamisch verändern.
Durch Einfügen der Eventhandler onFocus="this.style.backgroundColor='#FF9900'", bzw. onBlur="this.style.backgroundColor='#00468C'" ändert sich die Farbe, sobald das Eingabefeld den Fokus erhält, bzw. diesen verliert.
<input style="background-color: #00468C" onFocus="this.style.backgroundColor='#FF9900'" onBlur="this.style.backgroundColor='#00468C'">
Wem die Farben und das Aussehen von Standardlinks zu langweilig sind, dem bieten Cascading Style Sheets die Möglichkeit einer farbenfrohen Verlinkung.
<a href="eineSeite.htm" style="color:#00468C">einLink</a> bewirkt, dass die Linkfarbe immer im "Nightfire"- Blau erscheint, egal, ob der Link bereits einmal besucht wurde oder nicht.
Beispiel: einLink
Falls Sie viele Links mit demselben Schema darstellen wollen, empfiehlt es sich, eine Style- Definition im Head der Webseite anzulegen:
<STYLE TYPE="text/css"> a:link.schema1 {color:#00468C; text-decoration:none;} a:visited.schema1 {color:#FF9900; text-decoration:none;} </STYLE>
Dem Link weisen Sie die Styles durch Angabe ihres Klassennamens zu:
<A HREF="eineSeite.htm" CLASS="schema1">einLink</a>
Wenn Sie farbige Rahmen um Tabellen ziehen möchten, die auch von allen Browsern angezeigt werden (wie auf unseren Seiten praktiziert), dann greifen Sie zu folgendem kleinen Trick: Verwenden Sie verschachtelte Tabellen. Erstellen Sie zuerst eine einzellige Tabelle, deren Hintergrundfarbe Sie auf die spätere Rahmenfarbe setzen. In diese Tabelle setzen Sie Ihre eigentliche Tabelle. Die Rahmenbreite (den Abstand zur inneren Tabelle) bestimmen Sie mit den Attributen cellspacing und cellpadding.
<table BORDER=0 CELLSPACING=0 COLS=1 WIDTH="80%" BGCOLOR="#00468C" > <tr> <td> <table BORDER=0 CELLSPACING=0 CELLPADDING=2 COLS=1 WIDTH="100%" BACKGROUND="background.gif" > <tr> <td>....Inhalt....</td> </tr> </table> </td> </tr> </table>
Etwas einfacher geht es (aber nur) beim Explorer und Netscape 6+: <table border frame=box rules=none>
Ein HTML- Befehl, dessen Einsatzgebiet für das Gruppieren von Formularelementen angedacht ist, der sich aber auch bestens zum Hervorheben von normalen Inhalten eignet, ist <fieldset>.
Eine zusammengehörige Gruppe von (Formular-) Elementen schließen Sie in die Tags <fieldset>...</fieldset> ein (fieldset = Feldgruppe). Dazwischen können Sie beliebige Inhalte definieren. Unterhalb des einleitenden <fieldset>-Tags und vor den ersten Inhalten der Gruppe sollten Sie ferner eine Gruppenüberschrift (Legende) für die Elementgruppe vergeben. Schließen Sie den Gruppenüberschriftentext in die Tags <legend>...</legend> ein. Die Rahmen und den Text innerhalb davon können Sie mit Hilfe von HTML/CSS nach Wunsch formatieren.
<fieldset><legend>[ Farbige Umrandungen ]</legend> Einige interessante Inhalte </fieldset>
Wie dies in der Praxis aussieht, sehen Sie auf der vorliegenden Seite, alle Quickies sind in fieldsets gepackt.
Bestimmt ist Ihnen schon aufgefallen, dass der InternetExplorer in den Favoriten anstelle des Standard-Icons bei gewissen Links ein anderes Icon anzeigt, z.Bsp. und Sie haben sich gefragt, wie das funktioniert.
Das Geheimnis liegt im sogenannten FavIcon. Hierzu müssen Sie eine Datei namens Favicon.ico entwerfen, welche aus einer Grafik der Masse 16x16 Pixel besteht. Diese Datei kopieren Sie in jedes Verzeichnis Ihrer Homepage.
Die zweite Möglichkeit, dasselbe Resultat zu erzielen, besteht in folgendem Link, den Sie in den Head- Bereich der Seite(n) setzen, welche Ihrer Meinung nach "favoritenwürdig" erscheinen:
<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">
Fügt nun ein Besucher Ihre Webseite seinen Favoriten zu, so sucht der InternetExplorer auf Ihrer Domain nach Ihrem FavIcon und übernimmt dieses, falls vorhanden.
Bei der Datei Favicon.ico muss es sich um eine echte Windows-Icon-Datei handeln, Sie benötigen also ein Grafikprogramm, welches dieses Format unterstützt. Bei www.favicon.com können Sie sich ein solches Programm herunterladen oder ein Icon gleich online erstellen.
Hinweis: Dieser Effekt wird von Netscape 4x NICHT unterstützt.
Browser setzen automatisch einen kleinen Abstand zwischen Fensterrand und Seiteninhalt. Diesen Abstand können Sie auch bestimmen oder ganz weglassen. Erweitern Sie dazu Ihren <BODY>- Tag um folgende Attribute:
leftmargin/marginwidth: Abstand vom linken Rand topmargin/marginheight: Abstand vom oberen Rand
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
leftmargin/topmargin sind IE- spezifisch, marginwidth, bzw. marginheight sind NS- spezifisch.
Anstelle einer Hintergrundgrafik oder eines einfarbigen Seitenhintergrunds können Sie mithilfe eines Filters einen Farbverlauf in Ihre Hintergrundseite einbauen. <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ccffcc', startColorstr='#FFFFFF', gradientType='0');">
Sie können hierbei folgende Parameter bestimmen: endColorstr, startColorstr und gradientType
Beispiel
Hintergrundbilder scrollen normalerweise mit der Seite mit. Wenn Sie Ihr Hintergrundbild fixieren wollen, stehen Ihnen dazu zwei Möglichkeiten zur Verfügung.
Der Internet Explorer kennt das Attribut bgproperties="fixed", welches in den <BODY>- Tag eingefügt wird. Allerdings kennt kein anderer Browser diesen Befehl. <body background="xy.gif" bgproperties="fixed">
Etwas kompatibler geht das mit Style- Sheets: <body background="xy.gif" style="background-attachment:fixed;">
User des Online- Messenger- Services ICQ können Besuchern ihrer Webseite ihren aktuellen ICQ- Status anzeigen lassen:
<img alt="momentaner ICQ Status - grün=online, rot=offline" border="0" src="http://online.mirabilis.com/scripts/online.dll?icq=Ihre ICQ UID hier&img=2">
Nightfire ist:
Hierbei sind 10 verschiedene Indicator- Designs verfügbar: Nähere informationen dazu bei ICQ
Der Internet Explorer bietet ein neues Feature namens "MyImage Toolbar" an, welche es ermöglicht, Grafiken mit einem einfachen Mausklick zu speichern, zu drucken oder via EMail zu versenden. Manchem Webmaster ist dies ein Dorn im Auge. Es gibt jedoch zwei Möglichkeiten, die Toolbar zu disablen:
Bei einzelnen Bildern schalten Sie die Toolbar aus, indem Sie das Attribut GALLERYIMG="no" in den img- Tag setzen.
Beispiel: <img src="image.jpg" width="140" height="140" GALLERYIMG="no" >
Um die Toolbar generell zu unterbinden, verwenden Sie folgenden Meta- Tag, der in den Headbereich der HTML- Seite gesetzt wird:
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
Um die Toolbar bei einzelnen Bildern wiederum zuzuschalten, verwenden Sie:
<img src="image.jpg" width="140" height="140" GALLERYIMG="yes">
Der Rollover- Effekt ist eine einfache Variante, mit wenig Aufwand eine optisch ansprechende Navigation zu erstellen. Der Effekt basiert auf den beiden Eventhandlern mouseover und mouseout, denen zwei unterschiedliche Grafiken zugeordnet werden, so dass der Eindruck entsteht, die Grafiken würden animiert, wenn man mit dem Mauszeiger darauf zeigt.
Der Effekt lässt sich in zwei Schritten realisieren:
1. Vorladen (preload) der Austausch- Grafik (Code wird in den Head der Seite gesetzt)
<script language="JavaScript"> image1 = new Image(); image1.src = "jsimages/moi1.gif"; </Script>
2. Anpassen des Links
<a href="http://www.rollover.ch/rollover.htm" onmouseover="image1.src='jsimages/moi1.gif';" onmouseout="image1.src='gif1.gif';"> <img name="image1" src="gif1.gif" border=0></a>
Hierbei ist gif1 das Bild, welches beim Laden der Seite angezeigt wird und moi1.gif das Bild, welches beim mouseover angezeigt wird.
Beispiel:
Mit Hilfe von CSS können Sie den Scrollbars des Internet Explorers eine andere Farbe verpassen.
<style> <!-- BODY { scrollbar-arrow-color:#000066; scrollbar-base-color:#000066; scrollbar-face-color:#0033FF; scrollbar-highlight-color:#000033; scrollbar-shadow-color : #000033; } -->> </style>
Das obige Beispiel entspricht dem Blau der Scrollbar dieser Seite.
Mit folgendem Befehl ermöglichen Sie Ihren Besuchern das Ausdrucken von Seiten Ihres Angebots mit einem Mausklick
<a href="javascript:window.print()">Diese Seite drucken</a>
Beachten Sie, dass jeweils nur die aktuelle Seite ausgedruckt wird, die den Link beinhaltet und nicht ganze Framesets.
Die meisten Webmaster möchten es zwar lieber verhindern, aber manchmal kommt es doch vor, dass man eine HTML- Seite zum Download anbieten möchte. ;-)
IE4+ Browser unterstützen den document.execCommand() Befehl, welcher einige System- Dialoge aufrufen kann. Das folgende Script demonstriert den 'Speichern unter...' Dialog. Es beinhaltet 'onload Interlocking' und eine Alertbox für Nicht- IE- Browser. Fügen Sie das Script im Kopf Ihres HTML- Dokuments ein.
<script language="JavaScript"> // Source: CodeFoot.com // Please leave in this header. var isReady = false; function doSaveAs(){ if (document.execCommand){ if (isReady){document.execCommand("SaveAs");} }else{ alert('Feature available only in Internet Exlorer 4.0 and later.'); } } </script>
In den Body- Tag setzen Sie folgenden Eventhandler ein, der die Funktion des Scripts inaktiviert, bis die Seite vollständig geladen ist:
<body onload="isReady=true">
Der Link, der das Script zur Ausführung bringt, sieht folgendermassen aus:
<a href="javascript:doSaveAs()"> Diese Seite speichern </a>
Über das JavaScript- Objekt history, haben Sie Zugriff auf die besuchten Seiten des Anwenders. Dabei wird auf die Liste, wie sie in der History-Liste des Web-Browsers gespeichert ist, zugegriffen. Somit können Sie Verweise vom Typ "zurück zur zuletzt besuchten Seite" konstruieren.
<a href="javascript:history.back()">eine Seite zurück</a>
<a href="javascript:history.forward()">eine Seite weiter</a>
<a href="javascript:history.go(n)">n Seiten vor/zurück</a> go() springt so viele Seiten vor oder zurück, wie als Parameter definiert. Ein negativer Wert springt rückwärts (so viele Back-Vorgänge wie angegeben), ein positiver Wert springt vorwärts (so viele Forward-Vorgänge wie angegeben). <a href="javascript:history.go(-5)">5 Seiten zurück</a>
Sie möchten, dass beim Überfahren eines Links mit der Maus in der Statuszeile ein anderer als der Standardtext (URL) eingeblendet wird?
Mit der Einbindung einiger weniger JavaScript-Befehle können Sie dies erreichen.
Beispielcode: <a href="mydomain.de" onmouseover='self.status="Mein Hinweistext"; return true;' onmouseout='self.status="";return true;'>.......</a>
Die Event-Handler onMouseOver und onMouseOut führen hierbei je nach Ereignis (Event) den Befehl self.status="" aus, return true beendet den JavaScript-Code.
Weitere Beispiele für Statuszeilen- Ticker finden Sie hier
Sie möchten, dass sich die Anzeige in der Statuszeile beim Überfahren eines Links mit der Maus nicht ändert?
Mit der Einbindung folgenden Befehls im Body- Tag können Sie dies erreichen:
<BODY onmouseover="window.status='Diese Nachricht wird sich nicht verändern!';return true;">
Falls Sie auf Ihrer Seite keine eigene Suchmaschine betreiben können, lassen Sie doch einfach die grossen Suchmaschinen auf Ihrer Webseite für Sie suchen. Die Einbindung ist sehr einfach und, vorausgesetzt, Ihre Webseite wurde bei den Anbietern indexiert, wird sich die Trefferquote sehen lassen. Die folgenden zwei Beispiele zeigen die Einbindung einer Abfrage bei Google und Yahoo auf.
World Wide Web http://unix.nightfire.ch
World Wide Web unix.nightfire.ch
[Google]
<table width=100% border=0> <tr valign="bottom"> <td width="40"> </td> <td width="45%" align="left"> <FORM method=GET action="http://www.google.com/search" target="new"> <A HREF="http://www.google.com/"><IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google"></A><p> <INPUT TYPE=text name=q size=31 maxlength=255> <INPUT type=submit name=btnG VALUE="Google Suche"><p> <input type=hidden name=domains value="http://unix.nightfire.ch"> <input type='hidden' name='ie' value='iso-8859-1'> <input type='hidden' name='oe' value='iso-8859-1'> <input type=radio name=sitesearch value="">World Wide Web <input type=radio name=sitesearch value="http://unix.nightfire.ch" checked> http://unix.nightfire.ch</FORM></td> <td width="40"> </td> <td width="45%" align="left">
[Yahoo]
<form method=get action="http://search.yahoo.com/search" target="new"> <A HREF="http://www.yahoo.com/"><IMG SRC="http://us.i1.yimg.com/us.yimg.com/i/yahootogo/y150purp2.gif" border="0" ALT="Yahoo"></A><p> <input type="hidden" name="x" value="op"> <input name="va" size=31 maxlength=255> <input type="submit" value="Yahoo! Suche"> <p> <input type="hidden" name="va_vt" value="any"> <input type="radio" name="vs" value="">World Wide Web <input type="radio" name="vs" value="unix.nightfire.ch" checked>unix.nightfire.ch </form></td> <td width="40"> </td> </tr> </table>
Durch Einsatz eines simplen Style- Sheets können Sie in Textareas von Formularen ein Hintergrundbild einsetzen. Dies funktioniert allerdings nur bei IE und NS6, verursacht bei anderen Browsern aber keine negativen Effekte.
Setzen Sie einfach folgendes Style- Sheet in den Kopf Ihres HTML- Dokuments:
<style> textarea{ background-image:url(blue_saturn.jpg); color:ff0000; } </style>
Das sieht dann so aus:
Wenn wir unser Beispiel von oben etwas erweitern und zusätzlich die Eventhandler onMouseover und onMouseout ins Spiel bringen, können wir in Textareas das Hintergrundbild austauschen, sobald wir mit der Maus in das Feld hinein- bzw. hinausfahren.
Auch dieses Beispiel funktioniert nur mit dem IE und NS6, verursacht bei anderen Browsern aber keine Fehlermeldung.
<style> textarea.imageOne{ background-color:000000; background-image:url(blue_saturn.jpg); color:00ff00; } textarea.imageTwo{ background-color:000000; background-image:url(butterflies.jpg); color:ff0000; } </style>
Das Textarea erweitern wir durch die Eventhandler:
<textarea rows="12" cols="74" class="imageOne" onMouseOver="this.className='imageTwo'" onMouseOut="this.className='imageOne'"> . . . Ihr Text . . . </textarea>
Beachten Sie, dass wir in den Style- Sheets die Hintergrundfarbe auf background-color:000000; gesetzt haben. Dies verhindert den 'Flash' Effekt beim Laden der Bilder. Beachten Sie auch, dass beim IE die Bilder mit dem Text mitscrollen, beim NS6 hingegen statisch sind.
Das Beispiel:
. . . your text . . .
Anstelle des Hervorhebens von Text durch Fett- oder Kursivdruck erreichen Sie dies auch durch Einsatz von Style- Sheets.
<span style="background: light green">Markierter Text</span>
Markierter Text
Um zu verhindern, dass Textpassagen in Ihren HTML- Dokumenten mit gedrückter linker Maustaste markiert und danach mit Ctrl + C kopiert werden, setzen Sie folgendes, kleines Script ein:
<script language="JavaScript1.2"> function disableselect(e){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script>
Sicher ist Ihnen das ALT="" -Tag bekannt, mit welchem Sie bei Grafiken einen kleinen Text anzeigen lassen können, wenn Sie mit der Maustaste auf die Grafik fahren.
Mit Hilfe des TITLE="" -Tags können Sie dies auch erreichen, sogar bei reinen Textlinks. Den Effekt können Sie hier sehen.
Beispielcode: <a href="mydomain.de" title="Mein Hinweistext">.......</a>
Hinweis: Dieser Effekt wird von Netscape NICHT unterstützt.
Mit einem einfachen Meta-Tag können Sie einen tollen Effekt beim Betreten und/oder Verlassen Ihrer Webseite erzeugen:
<meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=xx)">
<meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=xx)">
Anstelle von xx setzen Sie einen Zahlenwert für den gewünschten Effekt ein. Welche Effekte Sie anwenden können, erfahren Sie hier.
Besondere Design- Akzente lassen sich mit transparenten Inlineframes erzielen:
In folgendem Beispiel wird die Hintergrundfarbe des Inlineframes transparent geschaltet, so dass sich bspw. beim Scrollen des IFrames keine Differenz zum Hintergrund der restlichen Page zeigt. Erreicht wird dies durch zwei Parameter: In den <IFRAME> Tag setzen wir folgendes Attribut: allowtransparency="true" In den <BODY> Tag der innerhalb des IFrame angezeigten Seite setzen wir folgendes Attribut: style="background-color: transparent"
.
Im zweiten Beispiel tricksen wir etwas mit Filtern und Farben. Der MS- Spezifische Filter Chroma gestattet es uns, einzelne Farben herauszufiltern. Indem wir nun dem innerhalb des Inlineframes angezeigten Dokuments eine spezielle Hintergrundfarbe geben und diese herausfiltern, wird der Hintergrund transparent. Als interessanter Nebeneffekt ist zu beachten, dass sich dieser Filter auch auf die Scrollbars des Inlineframes anwenden lässt.
<iframe style="filter:Chroma(color=#33FF33)" src="iframedummy2.htm" name="iframe" width="300" height="150" align="center" frameborder="0"></iframe>
Videos lassen sich, ähnlich wie Hintergrundmusik, mit den Befehlen embed (Netscape) und Object (Explorer) in eine Webseite einbinden. Die Befehlsfolge lautet:
<OBJECT WIDTH="160" HEIGHT=" 169" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,2,902" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject ID="NSPlay1"> <PARAM NAME="ShowControls" VALUE="1"> <PARAM NAME="FileName" VALUE="film.avi"> <PARAM NAME="AutoStart" Value="1"> <PARAM NAME="AnimationAtStart" VALUE=0> <PARAM NAME="TransparentAtStart" Value="1"> <EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" filename="film.avi" Name=NSPlay src="film.avi" ShowControls=1 ShowTracker=1 AutoStart=1 AutoRewind=0 AnimationAtStart=1 TransparentAtStart=1 WIDTH="160" HEIGHT="169"> </EMBED> </OBJECT>
Wichtig bei der Verschachtelung der beiden Befehle ist, dass der Embed- Befehl innerhalb des Object- Befehls steht. Trifft der Explorer innerhalb des Object- Befehls auf Code, der nicht zu diesem Befehl gehört, so ignoriert er ihn. Netscape hingegen ignoriert den Object- Tag und führt nur den Embed- Befehl aus.
Das obige Beispiel zeigt nicht nur den Film selbst, sondern auch die Steuerungstasten Start, Pause, Stop, Vor- und Zurückspulen an.
Ist die benötigte Komponente auf dem Client nicht installiert, wird automatisch der Download derselben vorgeschlagen.
Tip: Erfahren Sie hier mehr über das Einbinden von Multimediakomponenten.
Dieser Tip wurde hierhin verschoben.
