Gruppen
- Top Gruppen
- Betriebsysteme
- Windows classik
- Linux
- BS-Sonstige
- Software
- Datenbanken
- Bildbearbeitung
- Audio/mp3/Video
- Security/Viren
- SW-Sonstige
- Hardware
- Mainboard/CPU
- Grafikkarten
- Peripherie
- Laptop/Notebook
- HW-Sonstiges
- Netzwerk
- Telefon,ISDN,Modem
- W-Lan
- NW-Sonstiges
- Programmierung
- PHP,ASP,Perl...
- Java,C++...
- Webseiten/HTML
- Sonstiges
- PC-Sonstiges
- Plauderecke
- SN Intern
- Test
/ Forum / Webseiten/HTML
Webseiten/HTML
Fragevon Jürgen52 vom 07.01.2019, 13:00 Options
Bildtitel anzeigen
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.
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 vom 07.01.2019, 13:11 Options
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 vom 07.01.2019, 14:04 Options
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 vom 07.01.2019, 15:34 Options
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 vom 07.01.2019, 16:27 Options
@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 vom 08.01.2019, 08:22 Options
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++) {
[b]bilder[j].onmouseover=bilder[j].onmouseout=function () {[/b]
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 vom 08.01.2019, 11:16 Options
@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 vom 08.01.2019, 13:08 Options
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 vom 08.01.2019, 13:18 Options
hab mal bei meiner Datei aus Antwort 3, Scriptvariante aus A5, das Script ausgelagert.
Ergebnis: kein Unterschied!
Ergebnis: kein Unterschied!
Antwort 10 von rfb vom 08.01.2019, 15:16 Options
@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 vom 10.01.2019, 08:47 Options
@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.
Ähnliche Themen
Laufzeitfehler und Debugfehler beim Surfen
Mickey 04.02.2010 - 3430 Hits -
mit PHP EINE best. Zeile in XML überschreiben
Beezle-Bug 08.01.2007 - 77 Hits - 1 Antwort
Hinweis
Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..
Neue Einträge
