Hinweistexte mit Javascript einblendenHighlights

Grüne Links

Hinweistexte mit Javascript einblenden

Haben Sie schon einmal die meist grünen Links auf verschiedenen Newsseiten gesehen? Diese blenden für bestimmte Links werbliche Hilfe-Popups ein. Die Technik dahinter heißt Intellitxt und stammt von der Firma Vibrant (www.vibrantmedia.com/site/web_01a.html). Nun kann man über diese Art von Werbung geteilter Meinung sein, die Technik dahinter ist allerdings dennoch sehr interessant. Im Prinzip lässt sich per Javascript die komplette Website oder auch nur ein bestimmter Bereich nach Schlüsselwörtern filtern. Natürlich geht Intellitxt weiter und generiert das Javascript serverseitig, um für jedes Dokument innerhalb des CMS beziehungsweise Redaktionssystems eigene Schlüsselwörter anlegen zu können und diese eindeutig zuzuordnen. Eine einfache Hervorhebung lässt sich allerdings auch ausschließlich mit Javascript erledigen.

So geht’s

Hinweistexte mit Javascript einblenden

Das Grundprinzip ist schnell erklärt. Beim Laden der Seite rufen Sie eine Funktion auf:

Diese Funktion holt sich dann den Inhalt der HTML-Seite:


function hervor() {
var inhalt = document.body.innerHTML;


Soll nur ein Bereich eingelesen werden, können Sie auf diesen beispielsweise mit document.getElementById() zugreifen. Ein regulärer Ausdruck findet das Stichwort und optional noch die Pluralform:


var reg = new RegExp("(Stichpunkt)(e)?", "g");
var ersatz = "$1$2";
var ergebnis = inhalt.replace(reg, ersatz);
document.body.innerHTML = ergebnis;
}


Das Suchmuster wird dann per regulären Ausdruck und die Methode replace() ersetzt. Im Ersetzungsstring können Sie mit $1, $2 und so weiter auf die einzelnen Klammern im regulären Ausdruck zugreifen. Der reguläre Ausdruck selbst erhält als zweiten Parameter die so genannte Flag. Das g steht für das Finden (und hier Ersetzen) aller Vorkommen. Mit dem zusätzlichen i als Flag würde der reguläre Ausdruck auch noch zwischen Groß- und Kleinschreibung unterscheiden.

Array für Suchbegriffe

Hinweistexte mit Javascript einblenden

Bisher fehlen im Skript noch der Link und der Rollover-Effekt. Außerdem ist nur ein Suchbegriff möglich. All dies soll nun ergänzt oder geändert werden. Die Suchbegriffe sind in einem assoziativen Array versammelt. Der Suchbegriff selbst ist dabei der Index, der Wert ist die Beschreibung für den Hilfetext, der beim Rollover erscheint. Mit dieser Methode haben Sie auf beides einfachen Zugriff.


var stichpunkte = Array();
stichpunkte["Stichpunkt"] = "Ausführliche Beschreibung.";
stichpunkte["Stichpunkte"] = "Ausführliche Beschreibung für Stichpunkte.";
stichpunkte["mit"] = "hat eigentlich keine Bedeutung";


Bei der Funktion hervor() ändert sich das Grundgerüst nicht. Allerdings wird der ausgelesene Inhalt für jedes Stichwort einmal durchlaufen:


function hervor () {
var inhalt = document.body.innerHTML;
for (var stichpunkt in stichpunkte) {
}
document.body.innerHTML = inhalt;
}


Platzhalter

Hinweistexte mit Javascript einblenden

In der for-in-Schleife steckt dann die Ersetzung. Zuerst wird das Stichwort global durch einen Platzhalter ersetzt. Der Platzhalter sollte eine Symbolkette sein, die im Text nicht vorkommt. Notwendig ist der Platzhalter, um beim Ersetzen nicht das Stichwort im Hilfetext zu überschreiben. Der reguläre Ausdruck stellt sicher, dass es sich beim Stichpunkt nicht um die Pluralform handelt:


var reg = new RegExp("(" + stichpunkt + ")([^a-zA-Z])", "g");
inhalt = inhalt.replace(reg, "---$2");


Anschließend wird der Platzhalter ersetzt. Hierfür ist eine Schleife notwendig, da auch ein mehrmals vorkommender Stichpunkt jeweils einen in seiner Nähe platzierten Hilfetext haben sollte.


var reg2 = new RegExp("---");
var counter = 1;
while (reg2.test(inhalt)) {
var ersatz = "" + stichpunkte[stichpunkt] + "";
ersatz += "" + stichpunkt + "";
inhalt = inhalt.replace(reg2, ersatz);
counter++; }


Hilfetext ein- und ausblenden

Hinweistexte mit Javascript einblenden

Der Hilfetext selbst ist ein span-Element mit dem Hilfetext aus dem assoziativen Array. Zur Formatierung besitzt es eine CSS-Klasse namens popup. Die Einblendung erfolgt als Inline-Element, so dass der Hilfetext jeweils immer beim jeweiligen Stichpunkt steht. Mit margin-left und margin-top erreichen Sie noch ein wenig Verschiebung gegenüber der Ursprungsposition, so dass der Link nicht überlagert wird. Um das Stichwort legt das Skript beim Ersetzen einen Link. Auch hier übernimmt eine CSS-Klasse die Formatierung für den Normalzustand und auch für den Rollover-Effekt:


a.hervor { color: red;}
a.hervor:hover {color: blue;}
popup { font-weight: normal;
background-color: yellow;
border: 1px #AAAA00 solid;
width: 100px;
padding: 5px;}


Das span-Element ist anfangs mit dem CSS-Befehl display:none ausgeblendet. In der Funktion popup() wird es eingeblendet, wenn der Nutzer mit der Maus über den Link fährt. Dazu dient wie schon beschrieben der Wert inline für die display-Eigenschaft:


function popup(ele) {
document.getElementById(ele).style.display = "inline";
}


Vice versa blendet popout() wieder aus, wenn der Nutzer bei onmouseout den Link verlässt:


function popout(ele) {
document.getElementById(ele).style.display = "none";
}


Fazit

Hinweistexte mit Javascript einblenden

Was die Browserkompatibilität angeht, beschränkt sich das vorliegende Skript auf W3C-konforme Browser. Eine Anpassung für ältere Internet-Explorer-Versionen wäre aber kein Problem: Nur der Zugriff auf das style-Objekt und die display-Eigenschaft müssten mit document.all realisiert werden.

Das Skript erfüllt natürlich nur eine ganz bestimmte Aufgabe. Wenn Sie es für Ihre eigenen Webseiten übernehmen und anpassen wollen, sollten Sie vor allem auf Seiteneffekte achten. Hier muss je nach Anforderung noch das Suchmuster verbessert werden. Beispielsweise ist es unter Umständen nur sinnvoll, Stichwörter innerhalb von ganz bestimmten Tags zu suchen.

Ebenso groß ist das Feld für Erweiterungen bei der serverseitigen Anbindung. Denn irgendwoher müssen die Stichwörter ja kommen, die hervorgehoben werden. Denkbar wäre hier sowohl, das Javascript-Array serverseitig zu befüllen, als auch der Zugriff per Javascript auf andere Datenquellen, zum Beispiel XML-Daten und Webservices.

Alle Skripte und Listings aus dem Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.