Individuelle Tooltips mit CSS und Javascript
Geschrieben von Grishan - 10.05.2006
Wem die browsereigenen Tooltips zu langweilig sind, die beim Überfahren mit der Maus von verlinkten Texten oder Bildern
mit Titelangabe vom Browser eingeblendet werden, kann auf eine individuelle Anpassung per CSS und Javascript zurückgreifen.
Vorgestellt wird hier eine von mir modifizierte Variante des beliebten Nicetitle Scripts, in welches einige Veränderungen und
Fehlerbereinigungen im Bezug auf Browser mit der Gecko-Engine (Mozilla, Netscape und Firefox) eingebaut wurden.
Einleitung
Das ursprüngliche Nicetitle Script stammt von Stuart Langridge und wurde im Laufe der Zeit durch viele kleine Ergänzungen anderer Webworker immer wieder "aufgepeppt" und angepasst. Einen kleinen Wermutstropfen im Originalscript stellt die fehlende Unterstützung für die korrekte Titelanzeige bei verlinkten Bildern mit Titelangabe dar. Auch die inkorrekte Positionierung des Titles bei verlinkten Bildern mit und ohne float Eigenschaft in allen Gecko basierten Browsern (Mozilla, Netscape und Firefox) blieb dort leider noch ungelöst.
Da ich den Einsatz des Nicetitle Scripts als optisch ergänzende Hilfe durchaus für sinnvoll halte, wurde es von mir auch hier auf Dotflare (als entsprechend modifizierte Variante) eingebunden. Im Verlaufe des letzten halben Jahres habe ich es Stück für Stück mit den von mir gewünschten Anpassungen bzw. funktionalen Erweiterungen versehen.
Vorgenommene Anpassungen im Dotflare "Nicetitle Mod" :
- Unterstützung für die korrekte Anzeige der Titles bei verlinkten Bildern mit Titelanzeige hinzugefügt (alle Browser)
- Unterstützung für korrekte Titelpositionierung (verlinkte Bilder mit float Style) in Gecko basierten Browsern hinzugefügt
- Bei Linkzielen welche auf die eigene Domain verweisen (interne Links) wird die URL ausgeblendet
- angepasstes Auslesen des Accesskeys - wenn vorhanden, so dass dieser auch bei deaktiviertem Javascript im normalen Browser-Tooltip angezeigt wird
- die Breite des angezeigten Title Containers wird nun automatisch durch die Länge des enthaltenen Textes bestimmt
- Änderung der Positionierung der Titleanzeige auf linksbündig und oberhalb des verlinkten Textes oder Bildes
Einbindung der Nicetitle Funktionalität in ein (X)HTML Dokument
Zwei Dateien, das Javascript und eine Stylesheet Datei bilden die Grundlage:
- nicetitle.js - das Javascript zum Erzeugen der Nicetitles
- nicetitle.css - das Stylesheet (CSS) zum Anpassen des Titel Tooltips
Das Script und der Stylesheet werden ganz einfach im Kopfbereich des verwendeteten (X)HTML Dokumentes eingefügt.
Beispiel Code:
<head>
...
<script type="text/javascript" src="nicetitle.js">
</script>
<link type="text/css" media="screen" rel="stylesheet" href="nicetitle.css" />
...
</head>
Das wars schon ... :-), nun sollten alle verlinkten Texte oder Bilder deren Link eine Titelangabe besitzt, den entsprechenden Look, per CSS im Stylesheet festgelegt, aufweisen.
Anpassung des Nicetitle Javascriptes
Das Javascript bedarf eigentlich nur einer Anpassung, die gleich am Anfang des Scriptes vorgenommen werden kann.
Beispiel Code:
// set domain compare string for links with internal targets
// example : for www.mydomain.com use "mydomain" or "www.mydomain.com" as compare string
var domain = 'www.dotflare.com';
var domain - damit Verweise auf interne Urls ausgeblendet werden, muß hier für die Variable domain der Domainname eingtragen werden. Die Angabe von "www." oder dem Suffix wie '.de oder .com' ist dabei nicht unbedingt notwendig. Bleibt diese Angabe leer werden keine URL Verweise im Titel angezeigt, auch nicht bei Links auf externe Ziele.
Anpassung des Nicetitle Stylesheets (CSS Datei) :
Mittels der Styleangaben in der Datei nicetitle.css kann das Erscheinungsbild der eingeblendeten Titel gesteuert werden.
Beispiel Code:
/*==== Nicetitle Sample CSS ====*/
div.nicetitle {
background-color: #ffc;
border: 1px solid #333;
font-size: 1em;
left: 10px;
padding: 1px;
position: absolute;
text-align: left;
top: 0;
width: auto !important;
z-index: 20;
cursor: text;
color: #000000;
}
div.nicetitle p {
font: 11px arial, helvetica, sans-serif !important;
margin: 0;
padding: 0 3px 0 3px;
line-height: 14px;
}
div.nicetitle p.destination {
font: 10px tahoma, courier, monospace !important;
background-color: #ffc;
color: #bd252b;
padding: 0 3px 3px 4px;
text-align: left;
}
div.nicetitle p span.accesskey {
font: bold 10px tahoma, courier, monospace;
text-decoration: none;
background-color: #ffc;
color: #bd252b;
letter-spacing: 1px;
line-height: 14px;
}
- div.nicetitle - dieser Selector bestimmt das Aussehen des Titel-Containers (Hintergrundfarbe, Umrandung, Abstände etc.), welcher die Angaben für Titeltext, Accesskey und verweisende Url enthält.
- div.nicetitle p - dieser Selector bestimmt das Aussehen des Titeltextes.
- div.nicetitle p.destination - dieser Selector bestimmt das Aussehen des eingeblendeten Verweistextes (URL).
- div.nicetitle p span.accesskey - dieser Selector bestimmt das Aussehen des eingeblendeten Accesskeys.
Nicetitle Beispiel in der Praxis:
Zum besseren Verständnis habe ich ein Beispiel mit verschiedenen Tooltip Varianten angefertigt, die über eine Auswahlliste verfügbar sind. Weiterhin kann man sich die zum Tooltip zugehörige CSS Datei gleich mit ansehen.
Das Beispiel zeigt die unterschiedlichen Verlinkunsmöglichkeiten (Text, Bild, floatendes Bild) bei denen der individualisierte Tooltip (mit und ohne Accesskey bzw. externer URL) eingeblendet wird. Anhand des Nictitle Sample-Layout Quelltextes und den CSS Dateien lässt sich das Zusammenspiel beim Erzeugen der verschiedenen Tooltips gut nachvollziehen.
Download Nicetitle Mod
Der Dotflare "Nicetitle Mod" als Beispiel mit XHTML Strict - Sample Layout, allen zugehörigen CSS und Script Dateien samt Beschreibung ist im Downloadbereich als gepacktes ZIP-Archiv verfügbar.
Kommentare
Caesium schrieb am 30.08.2007 :
Wie bekomme ich Joomla denn dazu im Mainmenu den title.Zusatz im -Tag anzugeben? Finde diesen Punkt irgendwie nicht.
Danke für die Hilfe.
(1 Kommentar)
