Eigene Attribute definieren mit HTML5
Lösung
Seit HTML5 ist es nun endlich auch möglich, eigene (valide!) Attribute zu definieren und HTML-Elementen zuzuweisen. So muss man vor allem für JavaScript nicht mehr andere Attribute wie longdesc, name oder Ähnliches missbrauchen, um Daten für das Skript zu hinterlegen. Einzige Bedingung: das Attribut muss mit dem Präfix data- beginnen, also z. B. data-myattribute="Lorem ipsum dolor sit amet".
Beispiel
In folgendem, kleinem Beispiel wird jedem Bild ein Attribut data-largesrc zugewiesen, das den Pfad zu einer vergrößerten Version des Bildes enthält. Beim Klick auf das Bild wird der Wert des Attributs per JavaScript ausgelesen. Dieser Wert wird dann als neue src des Bildes gesetzt. (Das Beispiel funktioniert nicht im Internet Explorer, da dieser die vom W3C standardisierte Funktion addEventListener nicht unterstützt. Um das Beispiel übersichtlich zu halten, verzichte ich auf eine proprietäre Anpassung.)
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel: Eigene Attribute definieren mit HTML5</title>
<script type="text/javascript">
window.onload = function() {
// getting all images
var images = document.images;
for (var i = 0; i < images.length; i++) {
// adding click event listener to every image (except IE due to lack of supporting standards)
images[i].addEventListener('click', function() {
// setting the attribute value of 'data-largesrc' as src of the image
this.setAttribute('src', this.getAttribute('data-largesrc'));
}, false);
}
};
</script>
</head>
<body>
<div>
<img src="meinkleinesbild_1.jpg" data-largesrc="meingrossesbild_1.jpg" />
<img src="meinkleinesbild_2.jpg" data-largesrc="meingrossesbild_2.jpg" />
<p>Zum Vergrößern auf das Bild klicken</p>
</div>
</body>
</html>