Textbox mit CSS (Tooltipp)

[supercat]

Im vorangegangenen Tipp hatte ich erläutert, wie man per Highslide schöne Textboxen zaubern kann. Dabei erwähnte ich schon, dass es auch eine nette Lösung für Puristen gibt - zu denen zähle ich mich meistenteils auch. Zwar sind Surfer, die das Scripting in ihrem Browser abstellen, selbst schuld oder zu bequem, ihren Virenscanner auf dem Laufenden zu halten. Aber mit dieser Textbox-Lösung sind auch diese Menschen zu erreichen

So geht es:
Zuerst wird die Datei "style.css" des aktiven Mozilo-Layouts um Folgendes erweitert:

Code Auswählen Erweitern

a.box {
color:#008000;
font-style:italic;
font-weight:normal;
font-size:12px;
font-family: verdana, sans-serif;
text-decoration:underline;}

a.box:hover {
background:#7f7f7f;}

a.box span {
display:none;}

a.box:hover span {
position:absolute;
display:block;
width:210px;
color:black;
background:#efefef;
font:normal 12px verdana, arial, sans-serif;
border:1px solid #000000;
padding:5px;
text-decoration:none; }

.boxbildre {
max-width:120px;
float:right;
border:0px solid;
margin-top:5px;
margin-left:5px;
}
Das ist pures CSS und lässt sich nach Herzenlust verändern, z.B. mit grafischen Elementen "verschönern". Ich habe diese Zeilen nach dem Header-Abschnitt eingebaut, bin halt ein Ordnungsfanatiker

Ist das erledigt, muss noch die Datei "syntax.conf" im Verzeichnis "conf" erweitert werden. Diese Zeilen sind notwendig:

Code Auswählen Erweitern

box=<a class="box" href="#">{DESCRIPTION}<span><b>{DESCRIPTION}</b><br />{VALUE}<br /></span></a>
boxbildrechts=<img src="./kategorien/{CATEGORY}/dateien/{VALUE}" class="boxbildre">

Nun steht den Textboxen nichts mehr im Wege. Im Mozilo sieht das dann beispielsweise so aus:

Code Auswählen Erweitern

[box=PHP|PHP (rekursives Akronym: Hypertext Preprocessor; Backronym: Personal Home Page Tools) ist eine Skriptsprache mit einer an die Programmiersprache C angelehnten Syntax, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird.]

Das Ergebnis ist hier zu sehen:



Die Begriffe, zu welchen eine Textbox erscheint, sind hervorgehoben. Geht der User mit der Maus darüber, erscheint die Textbox mit zusätzlichen Erklärungen.

Wie aus dem Code zu sehen ist, lassen sich auch Bilder mit einbauen. Ich habe mich mit einem rechts angeordneten Bild begnügt. Es gehen jedoch auch andere Varianten, zum Beispiel die hier:



Wichtig zu wissen ist, dass die Breite der Box und der Bilder klar definiert sein müssen. Zudem verhält sich die Box so, dass sie zentriert zum Elternelement, also zu jenem Stylesheet, aus dem sie aufgerufen wird, dargestellt wird.

Wer etwas im Web sucht, wird eine Menge Scripte zu diesen Textboxen bzw. Tooltipps finden. Die hier beschriebene puristische Variante unterscheidet sich höchstens im Design. Daneben gibt es eine Menge Tooltipps, die mit Javascript daherkommen. Eine nette Tooltipp-Blase (Bubble) ist zum Beispiel >>>hier zu finden. Aber wie gesagt, dann haben wir wieder Javascript am Backen 

[Kighlander]

Absolut Genial. So was hab ich schon immer gebraucht (War aber ehrlich gesagt selber zu faul zum suchen ^^)

[supercat]

Es sind meist die einfachen Dinge, die uns richtig Freude machen