Jan 14
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:
tooltip.css
infobox.js
toolTip.js
Ähnliche Themen im Blog:
Januar 14th, 2008 at 8:08 pm
Da nicht auszuschließen ist, dass Google in Zukunft auch mit Javascript umgehen kann, kann man die ausgelagerte .js Datei noch via robots.txt vom Spidervorgang ausschließen 😉
Januar 14th, 2008 at 9:11 pm
Stimmt, micha hat recht, besser ist es die Datei mit den Tooltip Texten extra noch auszuschließen. ❗
User-agent: * Disallow: {absoluter Pfad zur Datei}/infobox.jsGoogle interpretiert auch Javascript, sonst wären Seiten die ausschließlich über Javascript verlinkt sind nicht im Suchmaschinen-Index.