Code-Beispiel: Bunte Links

Der JavaScript-Kram hier ist hoffnungslos veraltet. Keine Ahnung, ob ich das irgendwann einmal anpasse. Die Funktionalität scheint den Aufwand erstmal nicht zu rechtfertigen.

Aufgrund einer Forenanfrage bei Spotlight habe ich mal versucht, auf möglichst effiziente Weise bunte Links zu erstellen, ohne dabei den Quellcode für Suchmaschinen und andere Bots total zu zerschroten. Daher habe ich mir eine JavaScript-Lösung erdacht. Derart können nämlich die Suchmaschinen ausgeschlossen werden, die so nur den eigentlichen und daher einigermaßen sauberen Quelltext zu sehen bekommen. Nachfolgend eine kurze Erläuterung.

Benötigt wird zuerst natürlich mal ein entsprechender Verweis. Dieser ist durch zum Beispiel <a class="keyword" href="/bunte-links">bunte Links</a> schnell erstellt. Dann fehlt noch die entsprechende JavaScript-Funktion (nennen wir Sie mal coloredLinkLetters()), die beim Laden der Seite durch <body onload="coloredLinkLetters()"> aufgerufen wird. Diese sieht wie folgt aus:

function coloredLinkLetters(){
	var elem = document.getElementsByTagName('a');
	var expression = /^[a-zA-Z]$/;
	for (var i = 0; i < elem.length; i++){
		if (elem[i].hasAttribute('class')){
			if (elem[i].getAttribute('class') == "keyword"){
				var res = "";
				for (var j = 0; j < elem[i].innerHTML.length; j++){
					var c = elem[i].innerHTML.charAt(j);
					if (c.match(expression)){
						res += "<span class=\"" + c.toLowerCase() + "\">" + c + "<\/span>";
					} else {
						res += c;
					}
				}
	
				elem[i].innerHTML = res;
			}
		}
	}
}

An diesem Punkt haben wir bereits dafür gesorgt, dass jeder einzelne Buchstabe des Verweises von klassifizierten <span>-Tags umgeben ist. Durch die Verwendung eines regulären Ausdruckes werden hier ausschließlich Groß- und Kleinbuchstaben entsprechend umgesetzt.

Damit die Buchstaben nun aber schön bunt erscheinen, werden entsprechende CSS-Angaben benötigt:

a.keyword {
	background-color: yellow;
	border: 1px solid red;
	padding: 1px;
}
	
a.keyword span.a {color: red;}
a.keyword span.b {color: green;}
a.keyword span.c {color: aqua;}
a.keyword span.d {color: orange;}
a.keyword span.e {color: purple;}
a.keyword span.f {color: navy;}
	
usw.

Und - Trommelwirbel - es funktioniert: bunte Links! Meine hier eingesetzte eigene Version habe ich noch etwas erweitert; die Funktion erwartet jetzt noch zwei Parameter. Der erste gibt den Elementnamen, der zweite den Klassennamen an. So könnte man alle möglichen klassifizierten Elemente bunt darstellen. Ob man das hingegen will, bleibt dahingestellt; selbst die bunten Links werde ich wohl eher selten (im Sinne von gar nicht) einsetzen. Letzte Änderung: 23. März 2007