HP - Zubehör  
 


Free Counter
Backgrounds
Bannerrohlinge
Buttons
CGI-Scripte
PHP-Scripte
DHTML
Downloads
Gifs
HP-Vorlagen
Interfaces
Javascrpits & Applets
Linien
Logos
Smileys
Generatoren
Tutorials | T & T neu
Fonts

 
 

 

 


  Internes  
 


Gästebuch
Toplist
Links
Friendly Sites
E-Mail
Forum
Link me
Disclaimer
Home

 
 

 

 


  Mediadaten  
 
 

ICQ 167352813

--
erreichbar unter :

--www.hp-zubehoer.de
--www.viggo.de

 
 

© 2003 by viggo

 

  Tips & Tricks  
 


Automatische Weiterleitung neu
Farbige Schaltfläche ohne CSS neu
Titelleiste als Info-Element
Blinkender Button
Mit einem Klick Webseite ganz nach oben scrollen ?
Hintergrundmusik auf Webseite ?
Farbige Aufzählungszeichen ?
Unschöne Umrandung bei Bildlinks ?
Kann man in Textfeldern auch nur lesen ?
Die neuen Mauszeiger !
Wie kann ich die Scrolleiste unterdrücken ?
Die Scrollbalken nach links verschieben ?
Wie bleibt das Hintergrund immer stehen ?
Wie kann ich ein Bild oder eine Grafik immer zentrieren ?
Automatisch auf eine andere Seite weiterleiten ?
Was kann der "mailto:"-Befehl noch ?
Kann man die Grafiktoolbar des IE verstecken ?
Links ohne Unterstrich ?
Meine Homepage als Startseite festlegen lassen ?
Meine Homepage bookmarken lassen ?
Wie kann ich ein Text im Blocksatz schreiben ?
Artikel zum Druck anbieten ?
Farbige Hinterlegung eines Textes bei Mouseover ?
Quelltext einer Seite per Link anzeigen lassen ?
Überblendeffekt zwischen zwei Seiten ?
Formularfelder mit Sternen vor Blicken schützen ?
Tooltips nicht nur bei Bildern und Grafiken ?


Automatische Weiterleitung
Wie kann man nach einer bestimmten Zeit zu einer anderen Webseite weiterleiten?
Ganz einfach folgenden Meta-Tag im head-Bereich einfügen:

<meta http-equiv="refresh" content="5; URL=http://www.adresse.de/seite.html">

Die "5" bei content entspricht dabei 5 Sekunden

:: nach oben ::


Farbige Schaltfläche ohne CSS
Es muss nicht immer nur grau sein, Buttons können ganz nach deinem Layout angepasst werden
und das auch ohne CSS.

Ein normaler Button sieht so aus:

Kann aber auch so aussehen:

einfach beim Quellcode für die Schaltfläche folgendes eingeben:

<input type="submit" name="Submit" value="Button" style= "background-color: #CCCCCC; font-family: Verdana; font-size: 10px; color: #FFFFFF ">

damit kann die Farbe des Buttons, die Schriftart und die Farbe des Textes ändern

:: nach oben ::


Titelleiste als Info-Element
folgendes in den <head>Bereich der Seite einfügen,
und Text nach Belieben anpassen.

<SCRIPT LANGUAGE='JavaScript'>
<!--
var default1 = "Willkommen bei www.hp-zubehoer.de"; // Wird einmal beim Start angezeigt
var text1 = "diverses Material für ...";
var text2 = "... den HP-Bastler";
var text3 = "sowie Tipps und Tricks für den Anfänger";
var changeRate = 2000; // 1000 = 1 Sekunde
var messageNumber = 0;
function changeStatus() {
if (messageNumber == 0) {
document.title=default1;
}
else if (messageNumber == 1) {
document.title=text1;
}
else if (messageNumber == 2) {
document.title=text2;
}
else if (messageNumber == 3) {
document.title=text3;
}
messageNumber++;
setTimeout("changeStatus();",changeRate);
}
changeStatus(); //
// -->
</SCRIPT>

:: anzeigen ::

:: nach oben ::


Blinkender Button
ganz einfach folgenden Code in den HEAD-Bereich oder BODY-Bereich der Seite einbinden
Funktioniert allerdingsnur mit dem Internet Explorer :

<script language="JavaScript">
aktiv = window.setInterval("Blinkbutton()",500);// Hier können Sie die Schnelligkeit einstellen
zustand = 1;
function Blinkbutton()
{
if(zustand==1)
{
document.all.Blinkbutton.style.background="#CFCFCF";// Hier können Sie die Farbe einstellen
zustand=2;
}else{
document.all.Blinkbutton.style.background="#FF3F00";// Hier können Sie die Farbe einstellen
zustand=1;
}
}
</script>

:: anzeigen ::

:: nach oben ::


Mit einem Klick Webseite ganz nach oben scrollen ?

<a href="#top">wieder nach oben</a>

an der Stelle einfügen wo der Verweis nach oben stehen soll.

:: nach oben ::


Hintegrundmusik auf Webseite ?
einfach folgenden Code in den <head> Bereich der Seite einfügen :

<bgsound src="titel.mp3" loop="0">

loop="0" - bedeutet eimal abspielen
loop="n" - n gleich beliebige Zahl

Als Formate für die Musik eignen sich *.midi *.wav oder *.mp3

Beispiel ::anzeigen::

:: nach oben ::


Farbige Aufzählungszeichen ?
Ganz einfach mit Sonderzeichen (&#149;) zum Beispiel.
Größe und Farbe einfach nach belieben per <font>-tag ändern.

Punkt 1
Punkt 2
Punkt 3

:: nach oben ::




Unschöne Umrandung bei Bildlinks ?
Bei einem Klick auf Bildlinks werden beim Internet Explorer oftmals unschöne Umrandungen gezeigt.
Die können wie folgt vermieden werden.

<a href="test.html" onklick="javascript:if(document.all)this.blur();">Link</a>

Einiger Nachteil, man muss jeden einzelnen Link so behandeln.

mit Umrandung

ohne Umrandung

:: nach oben ::



Kann man in Textfeldern auch nur lesen und nicht reinschreiben ?
Alles möglich mit einem kleinen Trick bzw. Wort.

Hier ein normales Textfeld :


Hier ein "nur lesen" Textfeld :

Einfach im Input-Tag das Attribut "readonly" einfügen, un schon kann niemand etwas reinschreiben.
Im oberen Textfeld kann man noch etwas eintragen im unteren nicht mehr.

:: nach oben ::


Die neuen Mauszeiger !
Ab dem Internet Explorer ist Schluss mit dem Einheitsmauszeiger. Man kann für jedes Element einen eigenen Cursor kreieren.
Einfach mit dem style-Befehl dem Element oder der ganzen Seite zuordnen.
Soll zum Beispiel ein Cursor auf der ganze Seite werden einfach in den Body-Tag einfügen.

<body style="cursor:crosshair">

Ansonsten hier noch weitere Beispiele, einfach mit der Maus über den jeweilige Code fahren.

style="cursor:crosshair" style="cursor:se-resize"
style="cursor:pointer" style="cursor:s-resize"
style="cursor:move" style="cursor:w-resize"
style="cursor:e-resize" style="cursor:text"
style="cursor:ne-resize" style="cursor:wait"
style="cursor:nw-resize" style="cursor:help"
style="cursor:n-resize" style="cursor:url(cursor.cur)"
style="cursor:sw-resize"  

:: nach oben ::


Wie kann ich die Scrolleiste unterdrücken ?
Ist der Inhalt bzw. die Außmaße einer Seite nur so groß, daß es bequem auf eine Seite passt ? Dann könnte man doch ganz auf die Scrollbalken an der Seite verzichten. Einfach den Code scroll="no" in den <body>tag einbinden. Um auf verschiedene Auflösungen zu reagieren kann man auch scroll="auto" eingeben, somit wird der Scrollbalken nur Bedarf angezeigt.

Beispiel ohne Attribut ::anzeigen::

<body bgcolor="A9B8BD" text="000000" link="000000" vlink="000000" alink="62B684">


Beispiel mit Attribut ::anzeigen::

<body bgcolor="A9B8BD" text="000000" link="000000" vlink="000000" alink="62B684" scroll="no">

:: nach oben ::


Die Scrollbalken nach links verschieben ?
Manchmal ist es sinnvoll die Scrolleiste nicht rechts sondern Links zu haben, z.B. bei Frames,iFrames oder Textareas. Funktioniert aber erstmal nur mit dem IE ab Version 5.0 Einfachste Lösung einfach im <body>tag den Code dir="rtl" eingeben. "rtl" heisst "right to left" das bezieht sich dann auf die ganze Seite.

Beispiel ::anzeigen::

<body dir="rtl" bgcolor="A9B8BD" text="000000" link="000000" vlink="000000" alink="62B684">

:: nach oben ::


Wie bleibt das Hintergrund immer stehen ?
Wasserzeicheneffekt oder Hintergund soll immer stehenbleiben und beim scrollen sich nicht mitbewegen, lässt sich ganz einfach mit einem Atrribut erreichen. Einfach im <body>tag bgproperties="fixed" eingeben.

Beispiel ohne Atribut :: anzeigen ::

<body bgcolor="#A9d8BD" text="#000000" background="../../images/bg.jpeg" link="#000000" vlink="#000000" alink="#62B684">


Beispiel mit Atribut :: anzeigen ::

<body bgcolor="#A9d8BD" text="#000000" background="../../images/bg.jpeg" bgproperties="fixed" link="#000000" vlink="#000000" alink="#62B684">

:: nach oben ::


Wie kann ich ein Bild oder eine Grafik immer zentrieren ?
Vielleicht soll manchmal ein Bild, eine Grafik oder ein Logo immer genau in der Mitte zu sehen sein, egal welche Auflösung der Besucher eingstellt hat. Eigentlich ganz einfach. Erstellen sie eine Tabelle mit den Ausmaßen 100% in Höhe und Breite. Dann einfach dein Bild in die Tabelle einfügen und zentrieren.

Beispiel ::anzeigen::

<table border="0" width="100% height="100%">
<tr><td>
<center><p><img src="../../images/banner.jpeg></p></center>
</td></tr>
</table>

:: nach oben ::


Automatisch auf eine andere Seite weiterleiten ?
Soll ein Besucher automatisch auf eine andere Seite weitergeleitet, braucht man kein Javascript. Es geht ganz einfach mit einem Metatag im <head>bereich. Zeit ist mit "content" auch individuell einstellbar.

Beispiel :: anzeigen::

<meta http-equiev="refresh" content="5; URL=http://www.hp-zubehoer.de">

:: nach oben ::


Was kann der "mailto:"-Befehl noch ?
Bekanntlich kann man ja mit "mailto:" einen Email-link auf seiner Seite einfügen. Aber es gibt noch mehr Möglichkeiten, um einen Email-link zu gestalten.

Standard <a href="mailto:viggo@viggo.de>Standard</a>
mehrere Empfänger <a href="mailto:viggo@viggo.de; webmaster@viggo.de>mehrere Empfänger</a>
an CC-Empfänger <a href="mailto:viggo@viggo.de?cc=webmaster@viggo.de>an CC-Empfänger</a>
an BCC-Empfänger <a href="mailto:viggo@viggo.de?bcc=webmaster@viggo.de>an BCC-Empfänger</a>
mit Betreff <a href="mailto:viggo@viggo.de?subject=Betreffzeile>mit Betreff </a>
mit Text <a href="mailto:viggo@viggo.de?body=Zeile 1%0AZeile 2%0AZeile 3>Standard</a>

Zum Textbefehl; mit %0A erzeugt man eine Zeilenumbruch.
Man kann die Befehle natürlich auch kombinieren. Diese Verküpfungen erzeugt man logischerweise mit dem &-Zeichen.

mehrere Befehle <a href="mailto:viggo@viggo.de?cc=viggo@viggo.de&bcc=viggo@viggo.de&subject=mehrere Zeilen&body=Zeile 1%0AZeile 2%0AZeile 3>Standard</a>

 

:: nach oben ::


Kann man die Image-Toolbar des IE 6 verstecken ?
Ist man mit dem Internet Explorer 6 unterwegs kennt man sicherlich die Grafiktoolbar wenn man über ein Bild oder eine Grafik fährt.
Zwar erscheint diese erst bei einer Imagegröße von 130x130 Pixeln, doch kann trotzdem stören.
Mit einigen Atrributen kann man diese Toolbar beeinflussen.

Komplettes Verbot auf der ganzen Seite - einfach einen Meta-Tag setzen im Head-Bereich:
<meta http-equiv="imagetoolbar" content="no">

Ausschalten für einzelne Bilder - im IMG-Tag Attribut galleryimg="no" einfügen:
<img src="bild.gif" galleryimg="no">

Andersrum kann man die Grafiktoolbar auch wieder einblenden lassen, auch bei Grafike kleiner als 130x130 Pixel:
<img src="bild.gif" galleryimg="yes">

:: nach oben ::


Links ohne Unterstrich ?
Normalerweise ist ein Link durch Unterstreichung gekenzeichnet. Manchmal ist es aber nicht nötig oder nicht gewünscht.
Ganz schnell und einfach geht es mit einem Attribut im Link-Tag.

style="text-decoration:none"

<a href="http://www.viggo.de" style="text-decoration:none"</a>

:: nach oben ::


Meine Homepage als Startseite festlegen lassen ?
Ganz einfach mit einem kleinem Javascript. Funktioniert aber nur mit dem Internet Explorer.
Einfach folgenden Code an der Stelle des Links einfügen.

<a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.viggo.de');">Als Startseite festlegen</a>

Und natürlich an die eigene Homepage anpassen.

Beispiel :: Als Startseite festlegen ::

:: nach oben ::


Meine Homepage bookmarken lassen ?
Man kann eine Seite auch ganz einfach mit "Strg+D" zu den Favoriten hinzufügen. Weiß aber nicht jeder und außerdem gehts mit einem Klick besser.
Einfach folgenden Code einfügen.

<a href="javascript:window.external.AddFavorite('http://www.viggo.de','www.viggo.de HP-Zubehör')"> Zu den Favoriten hinzufügen</a>

Beispiel :: Zu den Favoriten hinzufügen::

:: nach oben ::


Wie kann ich einen Text im Blocksatz schreiben ?
Es gibt nicht nur den "left"-oder"right"-Tag sondern auch den "justify"-Tag. Diesen einfach in der Textformatierung angeben.

Beispiel ::anzeigen::

:: nach oben ::


Artikel zum Druck anbieten ?
Manchmal wäre es doch nicht schlecht schnell mal den Inhalt der Seite auszudrucken. Um es dem Besucher zu erleichtern, wird einfach ein kleines Javascript in die jeweilige Webseite eingebaut. Die wird immer wieder gern gesehen und erhöht die Funktionalität der Homepage. Einfach den folgenden Code in die Seite einbauen.

<input type button value="Drucken" onClick="javascript:window.print()">

Beispiel:

:: nach oben ::


Farbige Hinterlegung eines Textes bei Mouseover ?
Mit diesem Code können Texte oder auch nur einzelne Sätze bei Mouseover farbig hinterlegt und somit hervorgehoben werden.
Dies geschieht auch wirklich nur wenn die Mouse über den festgelegten Bereich fährt.
Hier der einzufügende Code.

<span onMouseOver="this.style.backgroundColor = '#FF0000';" onMouseOut="this.style.backgroundColor = 'A9D8BD';">Beispieltext</span>

Beispieltext wird rot hinterlegt.

:: nach oben ::


Quelltext einer Seite per Link anzeigen lassen ?
Wenn Besucher sich den Quelltext einer Webseite expliziet ansehen sollen, kann man dafür ganz einfach einen Link auf der Seite plazieren, um somit per Klick den Code anzeigen lassen. Einfach folgen Code an die Stelle wo der Link stehen soll einfügen.

<form><input type="button" value="Quelltext" onClick=window.location="view-source:"+window.location></form>

:: nach oben ::


Überblendeffekt zwischen zwei Seiten ?
Auch so einen Übelendeffekt nutzen wie auf diesen Seite sichtbar ? Kein Problem es bedarf nur einem kleinem Meta-Tag im Head-Berecih der Webseite.
Einfach diesem Code zwischen <head> und </head> einfügen.

<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">

Duration gibt die Geschwindigkeit an mit der die Seite eingeblendet wird. Funktioniert aber nur beim Öffnen der Seite.

:: nach oben ::


Formularfelder mit Sternen vor Blicken schützen ?
Als Erstes, ein wirklicher Schutz gegen Hacker ist dies nicht. Es ist nur nützlich wenn jemand weiteres noch bei der Eingabe anwesend ist. Um ein Formalurfeld mit Sichtschutz zu erstellen braucht man noch das Attribut type="password" mehr. Siehe folgenden Code.

<input name"Feld mit Sternen" size"20" type="password">

Einfach mal was eintippen.

:: nach oben ::


Tooltips nicht nur bei Bildern und Grafiken ?
Die kleinen "Fenster" die beim Überfahren von Bildern oder Schaltflächen erscheinen kennt wohl jeder. Diese Tooltips kann man auf jedes andere beliebige Element anwenden.
Dazu ist nur der <title>-Tag in das jeweilige Element einzufügen.
Ein solches Hilfefenster kann maximal 1024 Zeichen lang sein und mit einigen Codes noch gestaltet werden. Zum Beispiel &#09; gleich Tabulator oder &#10; für Zeilenumbruch.

Beispiele :: ansehen ::

:: nach oben ::