Attribut Auslesen
Ulrich
- javascript
0 Struppi0 Der Martin0 Ulrich0 Der Martin0 Struppi
0 Cybaer
Hallo,
Ich habe ein kleines Problem mit Javascript. Mit dem unten zitierten Script öffne ich einige kleine Grafiken in höherer Auflösung in einem neuen Fenster. Das funktioniert soweit auch einwandfrei.
Nun möchte ich aber anstatt:
-Zum Schließen auf das Bild klicken-
Gerne den Text in der Titelleiste auslesen, der bei dem referenzierten Bild in der alt="Beispiel" Angabe steht. Mit dem maskierten Befehl:
var TitleText = document.getElementsByTagName('img').Attribute('alt');
funktioniert das leider absolut nicht. Versucht habe ich ebenso:
var TitleText = document.getElementById('Bild1').Attribute('alt');.
Das funktioniet dann aber leider nur für eben das eine Bild mit der entprechenden Id und nicht für alle.
Leider sind meine Kenntnisse in Javascript wie offensichtlich nicht besonders gut- ich fange gerade erst an mich mittels try und error "reinzufuchsen".
Vielen Dank für das Interesse.
Ulrich
var TitleText = "Zum Schließen auf das Bild klicken";
function GrafikAnzeigen(GrafikURL, Breite, Hoehe) {
Fensteroptionen = "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0";
Grafikfenster = window.open("", "", Fensteroptionen + ',width=' + Breite + ',height=' + Hoehe);
Grafikfenster.focus();
Grafikfenster.document.open();
//var TitleText = document.getElementsByTagName('img').Attribute('alt');
with(Grafikfenster)
{
window.moveTo((screen.availWidth-Breite)/2, (screen.availHeight-Hoehe)/2);
document.write("<html><head>");
document.write("<title>"+ TitleText + "</title>");
document.write("</head>");
document.write("<body leftmargin='0' marginheight='0' marginwidth='0' topmargin='0'>");
document.write("<img border='0' onclick='window.close();' src='"+ GrafikURL +"' title='Zum Schließen auf das Bild klicken'>");
document.write("</body></html>");
}
return;
}
Nun möchte ich aber anstatt:
-Zum Schließen auf das Bild klicken-
Gerne den Text in der Titelleiste auslesen, der bei dem referenzierten Bild in der alt="Beispiel" Angabe steht. Mit dem maskierten Befehl:
var TitleText = document.getElementsByTagName('img').Attribute('alt');
funktioniert das leider absolut nicht. Versucht habe ich ebenso:
var TitleText = document.getElementById('Bild1').Attribute('alt');.
Wo hast du diese Funktionen her? Es gibt sie nicht.
Du kannst in JS auf Attribute einfach mit dem Punkt zugreifen:
var TitleText = document.getElementById('Bild1').alt;
Das funktioniet dann aber leider nur für eben das eine Bild mit der entprechenden Id und nicht für alle.
Du kannst nicht auf die Attribute einer Menge zugreifen, immer nur auf eins.
Struppi.
Hallo Ulrich,
Mit dem maskierten Befehl:
var TitleText = document.getElementsByTagName('img').Attribute('alt');
funktioniert das leider absolut nicht.
nein, das kann es so auch nicht.
Kannst du dir denken, warum die Methode getElementsByTagName ein 's' im Namen hat? Das soll andeuten, dass sie auf _mehrere_ Elemente zugreift und diese als Array zurückgibt. Dir fehlt also noch ein Index, um auf ein bestimmtes img-Element zuzugreifen.
Aber es geht ja auch noch einfacher. Gerade für den Zugriff auf die im Dokument eingebetteten Bilder gibt es die images-Collection, die du auch wie ein Array adressieren kannst:
var TitleText = document.images[n].Attribute('alt');
Zumindest der Zugriff auf die img-Elemente mit dem Index n ist so sehr einfach. Mit images.length kannst du sogar die Anzahl der Bilder abfragen, gültige Werte für den Index sind dann 0..images.length-1.
So long,
Martin
Hallo,
erstmal vielen Dank für Eure Antworten. Ich habe das Problem erstmal folgendermassen erschlagen.
Ich verlinke die Bilder wie folgt:
<a href="titel1_gr.jpg" onclick="GrafikAnzeigen('titel1_gr.jpg', '200', '150', 'Bild 1'); return(false)"><img class="titel_b1" src="titel1.jpg" width="100" height="80" alt="Bild 1" title="Zum Vergrößern aufs Foto klicken"></a>
Dann setzte ich in Javascript:
function GrafikAnzeigen(GrafikURL, Breite, Hoehe, GrafikName) {
...
var TitleText = GrafikName;
...
}
damit erreiche ich den Effekt, den ich habe will. Das was mich nervt ist aber, daß ich z. B. "Bild 1" jetzt 2mal angeben muß.
Soweit ist mir jetzt klar, daß ich bei einem Array Attribute nur auslesen kann, wenn ich angebe von welchem item im Array ich das Attribut haben will, richtig?
Ich nehme an, ein Konstrukt wie:
var TitleText = document.getElementById('thisID').alt;
~~~ würde nicht funktionieren, oder?
Wenn ich
~~~javascript
var TitleText = document.images[n].Attribute('alt');
~~~ richtig verstehe, dann schreibe ich alle Bilder in ein entsprechendens Array. Ok, abgesehen davon daß ich nur die ca. 6 Bilder in dem Array benötige, die als link angegeben werden sollen, wie bekäme ich dann definiert, daß ich beim klick auf bild 1 den alt Wert von bild 1 benötige und bei Bild n den von bild n?
Obige Frage macht vielleicht mein nächstes Anliegen plausibel ;)
Kann mir jemand ein Buch zu dem Thema empfehlen, daß für einen Einsteiger sinnvoll wäre. Allzu tief möchte ich in JS auch nicht eintauchen. Seit ca. 2 Monaten beschäftige ich mich mit interessehalber mit HTML und CSS rein hobbymäßig und eigentlich plane ich für die Zukunft eher mich in PHP etwas einzufuchsen.
Allerdings so kleine Scripte in JS erstellen zu können erscheint mich auch nicht falsch.
Ansonsten bleibt mir nur mich bei allen Forumsteilnehmern zu bedanken und vor allem auch bei den Verfassern von selfHTML. Ich habe über HTML und CSS verdammt viel lernen können!
Vielen Dank
Ulrich
Moin!
Soweit ist mir jetzt klar, daß ich bei einem Array Attribute nur auslesen kann, wenn ich angebe von welchem item im Array ich das Attribut haben will, richtig?
jein. Du meinst wahrscheinlich das richtige, hast es aber ungeschickt formuliert: Ein Attribut kannst du nur von _einem_ Element abfragen. Wenn du ein Array aus mehreren Elementen hast, musst du tatsächlich angeben, auf _welches_ Element du zugreifen möchtest.
Ich nehme an, ein Konstrukt wie:
var TitleText = document.getElementById('thisID').alt;
Doch, wenn thisID tatsächlich ein img-Element im Dokument markiert, sollte das funktionieren.
> Wenn ich
> ~~~javascript
> var TitleText = document.images[n].Attribute('alt');
>
~~~ richtig verstehe, ...
Lies dir nochmal durch, was Struppi dir zum Thema "Zugriff auf Attribute" geschrieben hat. Ich hab's bei deinem ersten Posting übersehen, aber der Zugriff mit object.Attribute() ist pure Erfindung. Das gibt's nicht, und die Anweisung dürfte einen JS-Fehler produzieren.
Es gibt entweder die Form object.getAttribute('attrname') oder die Kurzform object.attrname, wobei der IE bei der Langform gern rumzickt und deshalb die Kurzform vorzuziehen wäre (hier also document.images[index].alt).
> dann schreibe ich alle Bilder in ein entsprechendens Array. Ok, abgesehen davon daß ich nur die ca. 6 Bilder in dem Array benötige, die als link angegeben werden sollen, wie bekäme ich dann definiert, daß ich beim klick auf bild 1 den alt Wert von bild 1 benötige und bei Bild n den von bild n?
Beispielsweise indem du deiner Funktion GrafikAnzeigen() im onclick-Handler nicht die Parameter direkt übergibst, sondern nur den Bildindex. Die Funktion holt sich die Daten dann selbst aus dem Array.
Damit erreichst du zwar, dass dein Quellcode etwas aufgeräumter aussieht, aber du musst immer noch an zwei Stellen editieren.
> Kann mir jemand ein Buch zu dem Thema empfehlen, daß für einen Einsteiger sinnvoll wäre. [...]
> Allerdings so kleine Scripte in JS erstellen zu können erscheint mich auch nicht falsch.
Deine Absicht finde ich wirklich gut, aber ich kann dir leider kein geeignetes Werk empfehlen. Schon allein deshalb, weil ich eher der Typ bin, der mit Schmierzettel, Skizzen und einem reinen Nachschlagewerk und einem PC zum Ausprobieren am besten lernt.
Schönen Tag noch,
Martin
--
Ungeschehene Ereignisse können einen katastrophalen Mangel an Folgen nach sich ziehen.
(Unbekannter Politiker)
Hallo,
Es gibt entweder die Form object.getAttribute('attrname') oder die Kurzform object.attrname, wobei der IE bei der Langform gern rumzickt und deshalb die Kurzform vorzuziehen wäre (hier also document.images[index].alt).
Es gibt auch die attributes[]-Collection, welche mindestens seit IE 5.5 passabel funktioniert:
...
<body>
<img src="bla.gif" alt="blabla">
<script type="text/javascript">
alert(document.images[0].attributes["alt"].nodeValue);
document.images[0].attributes["onclick"].nodeValue=function(){alert('bla');};
</script>
</body>
...
Allerdings tendiere ich nach Moeglichkeit auch zu einfachen Ansaetzen wie document.images[0].alt
.
MfG, Thomas
<a href="titel1_gr.jpg" onclick="GrafikAnzeigen('titel1_gr.jpg', '200', '150', 'Bild 1'); return(false)"><img class="titel_b1" src="titel1.jpg" width="100" height="80" alt="Bild 1" title="Zum Vergrößern aufs Foto klicken"></a>
Das ist nicht besonders. Besser wäre sowas:
<a href="titel1_gr.jpg"
onclick="GrafikAnzeigen(this.href, 200, 150); return false"
<img src="titel1.jpg" width="100" height="80" alt="Bild 1" title="Zum Vergrößern aufs Foto klicken"></a>
....
damit erreiche ich den Effekt, den ich habe will. Das was mich nervt ist aber, daß ich z. B. "Bild 1" jetzt 2mal angeben muß.
Das Problem ist, dass du von einem Element (das <a>) auf ein zweites (das <img>) zugreifen willst. Dafür gäbe es mehrere Möglichkeiten.
z.b mit [link:http://de.selfhtml.org/javascript/objekte/node.htm#first_child@title=firstChild
<a href="titel1_gr.jpg"
onclick="GrafikAnzeigen(this, 200', 150); return false"
<img src="titel1.jpg" width="100" height="80" alt="Bild 1"></a>
function Grafikanzeigen(obj, w, h)
{
var titel = obj.firstChild.alt;
var url = obj.href;
....
}
Ich nehme an, ein Konstrukt wie:
[code lang=javascript]
var TitleText = document.getElementById('thisID').alt;
Doch, aber document.images[...] ist einfacher und schneller und abrwärtskompatibel.
> Wenn ich
> ~~~javascript
> var TitleText = document.images[n].Attribute('alt');
>
~~~ richtig verstehe, dann schreibe ich alle Bilder in ein entsprechendens Array.
Nein, du hast nicht mal bei selfhtml nachgeschlagen was document.images für ein Objekt ist?
Und die Funktion Attribute() gibt es nach wie vor nicht, zumal selbst getAttribute überflüssig ist und zu Fehlern führen kann.
[n] n ist hier auch nicht unbedingt die Nummer, du kannst dem Bild auch einen Namen geben und das Bild damit ansprechen.
Struppi.
--
[Javascript ist toll](http://javascript.jstruebig.de/)
Hi,
hinzuzufügen wäre noch:
Die Methode um den Attributwert zu ermitteln lautet getAttribute(), nicht Attribute().
Der "direkte" Zugriff auf ein (Standard-)Attribut (s. Struppi) ist, sofern möglich, zu bevorzugen, da insbes. der IE mit getAttribute() Probleme haben kann, wenn es "direkt" auch (und zuverlässig) geht. Wenn nicht, dann bleibt immer noch getAttribute().
Gruß, Cybaer