Supportnet / Forum / Webseiten/HTML
Bildtitel anzeigen
Frage
Hallo, Webmaster!
Ich möchte auf meiner Webseite, beim Überfahren verschiedener Bilder den Titel des jeweiligen Bildes in einem <div> ... </div> anzeigen lassen. Wie es auf dieser Seite http://www.stadt-hartenstein.de/ zu sehen ist. Das geht wahrscheinlich nur mit JScript, da bin ich aber totaler Laie. Ich hoffe, Ihr könnt mir helfen.
Danke schonmal im Voraus.
Antwort 1 von sutadur
Dort wurde das in der Tat mit JavaScript gelöst. Schau Dir dazu dieses Kapitel in SelfHTML mal an: http://de.selfhtml.org/javascript/beispiele/buttons.htm
Antwort 2 von derpfleger
Eine Möglichkeit mittels CSS diesen Effekt zu erzeugen ist zB hier beschrieben: Links mit zusätzlichen Informationen via CSS.
Gruß derpfleger
Gruß derpfleger
Antwort 3 von rfb
so sollte das klappen:
die Funktion bilderinit startet nach dem Seitenladen (onload) und versieht alle Bilder innerhalb des DIVs Bildergallerie mit einem onmouseover, -out-Event. Dieser ruft die in bilderinit enthaltene Funktion anzeige auf, welche ja nach Bedingungen das title-Attribut des Bildes ausliest und entweder den span mit der ID info damit füllt (ggf. noch einen Text-Kindknoten dazu bereitstellt) oder den inhalt wieder löscht.
Die Version von derpfleger ist nicht anwendbar, da <img> ein inhaltsloser tag ist, daher kann dessen (nicht vorhandener) Inhalt auch nicht mittels CSS verborgen und auf der Seite verschoben werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>test</title>
<script type="text/javascript">
function bilderinit() {
var wo=document.getElementById("bildergallerie");
if (!wo) return false;
var anzeige=function () {
var info=document.getElementById("info");
if (!info) return false;
var was=this.title;
if (!info.firstChild) info.appendChild(document.createTextNode(was));
else info.firstChild.data=(info.firstChild.data!=was)?was:"";
}
var bilder=wo.getElementsByTagName("img");
for (var j=0;j<bilder.length;j++) {
bilder[j].onmouseover=anzeige;
bilder[j].onmouseout=anzeige;
}}
window.onload=function () {
bilderinit()
}
</script>
</head>
<body>
<div id="bildergallerie">
<img src="bild1.jpg" alt="ein Bild" title="ganz ganz lange Bildbeschreibung">
<span id="info"></span>
</div>
</body>
</html>die Funktion bilderinit startet nach dem Seitenladen (onload) und versieht alle Bilder innerhalb des DIVs Bildergallerie mit einem onmouseover, -out-Event. Dieser ruft die in bilderinit enthaltene Funktion anzeige auf, welche ja nach Bedingungen das title-Attribut des Bildes ausliest und entweder den span mit der ID info damit füllt (ggf. noch einen Text-Kindknoten dazu bereitstellt) oder den inhalt wieder löscht.
Die Version von derpfleger ist nicht anwendbar, da <img> ein inhaltsloser tag ist, daher kann dessen (nicht vorhandener) Inhalt auch nicht mittels CSS verborgen und auf der Seite verschoben werden.
Antwort 4 von Jürgen52
@rfb
Danke für dein umfangreiches Script. Ich werde es ausprobieren. Melde mich wieder.
Danke für dein umfangreiches Script. Ich werde es ausprobieren. Melde mich wieder.
Antwort 5 von rfb
ich wurde gerade auf die kürzere Schreibweise mittels anonymer Unterfunktion sowie gleichzeitiger Zuweisung an mehrere Events aufmerksam gemacht, also hier die kürzere Script-Version:
Arbeitsweise ist identisch.
Betonen möchte ich (gilt für beide Versionen) dass durch die Zuweisung der Event-Handler mittels JavaScript die onmouse-Orgien im HTML (die sind zB eines der Kennzeichen für Frontpage-Quälcode) erspart bleiben.
<script type="text/javascript">
function bilderinit() {
var wo=document.getElementById("bildergallerie");
if (!wo) return false;
var bilder=wo.getElementsByTagName("img");
for (var j=0;j<bilder.length;j++) {
bilder[j].onmouseover=bilder[j].onmouseout=function () {
var info=document.getElementById("info");
if (!info) return false;
var was=this.title;
if (!info.firstChild) info.appendChild(document.createTextNode(was));
else info.firstChild.data=(info.firstChild.data!=was)?was:"";
}}}
window.onload=function () {
bilderinit();
}
</script>Arbeitsweise ist identisch.
Betonen möchte ich (gilt für beide Versionen) dass durch die Zuweisung der Event-Handler mittels JavaScript die onmouse-Orgien im HTML (die sind zB eines der Kennzeichen für Frontpage-Quälcode) erspart bleiben.
Antwort 6 von Jürgen52
@rfb
Klasse deine Hilfe. Das erste Script funktioniert einwandfrei, das Zweite muss ich erst noch ausprobieren. Ich habe versucht das Script in eine externe Datei bilder.js auszulagen, leider funktioniert es nicht. Irgend was stimmt nicht. Das Script muss dafür sicher geändert werden. Aber wie?
MfG
Klasse deine Hilfe. Das erste Script funktioniert einwandfrei, das Zweite muss ich erst noch ausprobieren. Ich habe versucht das Script in eine externe Datei bilder.js auszulagen, leider funktioniert es nicht. Irgend was stimmt nicht. Das Script muss dafür sicher geändert werden. Aber wie?
MfG
Antwort 7 von rfb
Zitat:
Das Script muss dafür sicher geändert werden. Aber wie?
eigentlich nicht - allerdings könnte eine Interaktion mit anderen - evtl. auch extern eingebundenen - Scripten stattfinden, wenn die auch ein window.onload nutzen (bzw. ein onload-Attribut im body-Tag), da onload nur einmal "feuert".Das Script muss dafür sicher geändert werden. Aber wie?
Antwort 8 von rfb
hab mal bei meiner Datei aus Antwort 3, Scriptvariante aus A5, das Script ausgelagert.
Ergebnis: kein Unterschied!
Ergebnis: kein Unterschied!
Antwort 9 von Yacc
Antwort 10 von rfb
@Yacc:
lies bitte den Hinweis in Antwort 3 am Ende, dann weißt du "warum javascript", bzw. warum die CSS-Lösung nicht funktionieren kann.
lies bitte den Hinweis in Antwort 3 am Ende, dann weißt du "warum javascript", bzw. warum die CSS-Lösung nicht funktionieren kann.
Antwort 11 von Jürgen52
@rfb
Alles OK. Ich hatte nur den falschen Pfad zur Script-Datei eingetragen. Danke nochmal für deine Hilfe.
Alles OK. Ich hatte nur den falschen Pfad zur Script-Datei eingetragen. Danke nochmal für deine Hilfe.