Mambo CMS / Joomla CMS - Weblog Menüpunkt: Webdesign

Individuelle Tooltips mit CSS und Javascript

Icon Artikel Ersteller Geschrieben von Grishan - 10.05.2006

Nicetitles mit CSS 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.

Nicetitle Beispiel ansehen

 

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.

Download Nicetitle Mod

 

Kommentare

Icon Kommentar Ersteller 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)

Kommentar schreiben:

 

Hinweis zur Spam Protection:
HTML Tags in Kommentaren werden nicht ausgewertet und nicht angezeigt.
Die Kommentare werden vor der Veröffentlichung besichtigt und dann freigeschaltet.


Micro Network

Wordpress CMS Showcase

Web Standards

XML Schema Validator

1158218