Jan. 14 2008
DHTML Tooltip mit nicht auslesbaren Texten
Im letzten Blogpost stellte ich das DHTML Tooltip Script vor. Ich wurde jedoch vor die Aufgabe gestellt, die Tooltip-Texte nicht mehr direkt in den Quelltext abzulegen, sodass sie von Suchmaschinen wie Google nicht ausgelesen werden können. Das bestehende Script wollte ich nicht anrühren, sondern ein eigenes Script (infobox.js) schreiben, welche die gewünschte Funktionalität realisiert.
Im Header der Seite müssen also folgende Dateien eingebunden werden:
<link rel="Stylesheet" type="text/css" href="tooltip.css" media="screen" /> <script language="javascript" type="text/javascript" src="toolTip.js"></script> <script language="javascript" type="text/javascript" src="infobox.js"></script>
Die Elemente, auf die das Tooltip angewendet werden soll, müssen sich innerhalb eines Elementes mit der ID „boxes“ befinden. Jedes Element, das einen Tooltip anzeigen soll, wird mit genau dem Klassennamen versehen, welches das anzuzeigende Element als ID besitzt.
<div id="boxes"> <a class="t_0"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 1" aus --> <a class="t_1"><img class="png" src="qmbox.png" alt="Box1" /></a> <!-- gibt "Tooltip 2" aus --> </div>
Das Script infobox.js ist wie folgt aufgebaut:
codeToAdd = Array();
codeToAdd[0] = '<div class="tooltipsammlung">';
codeToAdd[1] = '<div class="tooltip" id="t_0"><b>Tooltip 1</b></div>';
codeToAdd[2] = '<div class="tooltip" id="t_1"><b>Tooltip 2</b></div>';
codeToAdd[7] = '</div>';
function bindTooltip() {
document.getElementsByTagName("body")[0].innerHTML += codeToAdd.join('');
path = document.getElementById("boxes").getElementsByTagName("a");
for ( var i = 0; path[i] ; i++ ) {
if ( path[i].className ) {
path[i].onmouseover = function() { initTooltip(this.className); };
path[i].onmouseout = function() { hideTooltip(); };
}
}
}
if ( window.addEventListener ) {
addEventListener( "load", bindTooltip, false );
} else {
attachEvent( "onload", bindTooltip );
}
Die Funktion bindTooltip() bindet zuerst das Array „codeToAdd“ (also die anzuzeigenden Tooltips) in den <body> der Seite ein. Danach werden alle <a> Elemente innerhalb von „boxes“ ermittelt. Den gefundenen Elementen werden die Javascript Funktionen initTooltip() und hideTooltip() zugewiesen.
Hier die benötigten Dateien:
Hier gibt es die benötigten Dateien:
