Automatische Bildlegende
Nach obenWas macht dieses Script?
Dieses JavaScript sucht beim vollständigen Laden der Seite alle Bilder mit der CSS-Klasse (class), welche in ImageCaption.settings.imgClass definiert ist. Diese Bilder werden überprüft, ob sie ein Titel (title) haben.
Falls dies der Fall ist, wird das Bild in ein div-Element eingepackt und es wird ein p-Element mit dem Titel des Bildes unter das Bild als Legende eingefügt.
JavaScript-Code
var ImageCaption = {
settings: {
divClass: "imagecaption", // CSS class für das DIV
imgClass: "caption" // Alle Bilder mit dieser class werden verarbeitet
},
makeCaptions: function() {
if(!document.getElementsByTagName || !document.createElement) return;
var imgs = document.getElementsByTagName("img");
var div, p, text, img;
for(var i = 0; i < imgs.length; i++) {
if(imgs[i].className.indexOf(this.settings.imgClass) < 0 || imgs[i].title == "") continue;
div = document.createElement("div");
div.className = this.settings.divClass;
div.style.width = "0px";
img = imgs[i].cloneNode(false);
p = document.createElement("p");
text = document.createTextNode(img.title);
p.appendChild(text);
img.title = "";
div.appendChild(img);
div.appendChild(p);
imgs[i].parentNode.replaceChild(div, imgs[i]);
if(img.width && img.width != 0)
img.parentNode.style.width = img.offsetWidth + "px";
else
img.onload = function() { this.parentNode.style.width = this.offsetWidth + "px"; };
}
}
}
window.addEventListener ?
window.addEventListener("load", function() { ImageCaption.makeCaptions(); }, false) :
window.attachEvent("onload", function() { ImageCaption.makeCaptions(); });
Datei: ImageCaption.js
Beachte: Die CSS-Klassen können unter ImageCaption.settings eingestellt werden.
MarkUp
Die Bilder sollten wie folgt in die HTML-Datei eingebunden werden:
<img src="bild_url" class="caption" title="Beschreibung" />
Dies würde folgendes ergeben:
<div class="imagecaption">
<img src="bild_url" class="caption" />
<p>Beschreibung</p>
</div>
Achtung: Ein Bild (img) ist ein inline-Element. Mit der Anwendung dieses Scripts wird das Bild in ein div-Element gepackt, welches ein block-Element ist. Dies kann dazu führen, dass das Bild nicht mehr an der richtigen Stelle ist.
Hier gibt es noch ein Beispiel.
Mulle
Sieht auf jeden Fall top aus.
Koka
Schon eine tolle Sache, aber mal Hand aufs Herz - warum sollte man das nicht auch so machen dürfen? OK, es ist ein Schmankerl und spart dabei noch Platz, aber es wäre doch auch so alles korrekt
fphilipe
@koka:
Es ist ja gar nicht die Rede davon, dass das HTML inkorrekt ist. Du kannst es auch per Hand machen. Ob das praktisch ist?
Flo
Das ist ja alles schön und gut aber leider noch nicht ganz ausgereizt. Semantisch viel besser ist die Lösung via Definitionsliste. Dabei ist das Bild dann der <dt> und die Beschreibung/Legende die <dd>. Nachzulesen unter anderem bei mediaevent (www.mediaevent.de).
Flo
So, ich nochmal. Ich will euch natürlich den geänderten Code nicht schulldig bleiben:
var ImageCaption = {
settings: {
divClass: "meImgLeft", // CSS class name for the surrounding DIV
imgClass: "caption" // make caption on images with this class name
},
makeCaptions: function() {
if(!document.getElementsByTagN ame || !document.createElement) { return; }
var imgs = document.getElementsByTagName("img");
var div, p, text, img;
for(var i = 0; i < imgs.length; i++) {
if(imgs[i].className.indexOf(t his.settings.imgClass) < 0 || imgs[i].title == "") continue;
dl = document.createElement("dl");
dl.className = this.settings.divClass;
dl.style.width = imgs[i].width + "px";
img = imgs[i].cloneNode(false);
dt = document.createElement("dt");
dd = document.createElement("dd");
text = document.createTextNode(img.title);
dl.appendChild(dt);
dl.appendChild(dd);
dt.appendChild(img);
dd.appendChild(text);
imgs[i].parentNode.replaceChil d(dl, imgs[i]);
if(img.width && img.width != 0)
img.parentNode.style.width = img.offsetWidth + "px";
else
img.onload = function() { this.parentNode.style.width = this.offsetWidth + "px"; };
}
}
}
window.addEventListener ? window.addEventListener("load", function() { ImageCaption.makeCaptions(); }, false) : window.attachEvent("onload", function() { ImageCaption.makeCaptions(); });