Bilder mit JavaScript laden - IE macht nix

[webernie]

Hallöchen,

ich lade mit JavaScript Vorschaubilder in eine Seite. Beim Klick auf diese Vorschaubilder soll das entsprechende Bild in groß in einem anderen Div auf der Seite angezeigt werden. Leider passiert im IE (Version 7) nix, wenn man auf die Vorschaubilder klickt.
Kann mir jemand sagen, woran das liegt?
Hier das Script, was die Bilder lädt:

for (var i = 0; i < (pictureCount); i++) {

var newPicture  = document.createElement"img"); // creates a new <img>
var newAction = document.createAttribute("onclick"); // on click the right picture is shown in big format

newAction.nodeValue = "stopShow(); choosePicture(" + i + ");"; // add attribute: onclick //"stopShow" stopt eine Diashow

newPicture.src = "pix/preview/" + i + ".jpg"; // add picture source

var newId = document.createAttribute("id"); //set an ID for each Picture to give it more properties in the css-file

newId.nodeValue = "pic";
newPicture.setAttributeNode(newId);
var myDiv = document.getElementById("smallpic"); // where the image is displayed

newPicture.setAttributeNode(newAction); // associates the image with the onclick action

myDiv.appendChild(newPicture); // displays the image in the smallpic div

}

Zur Erklärung: Die Bilder heißen "0.jpg", "1.jpg", usw.
In Opera und Mozilla funktioniert alles.

Ich wäre für jeden Hinweis dankbar.

[Joe]

Hallöchen,

var newPicture  = document.createElement"img"); // creates a new <img>

------------------------------------------> Fehlende Klammer. Vielleicht hängt sich der IE daran auf

[molily]

Hallo,

var newAction = document.createAttribute("onclick"); // on click the right picture is shown in big format

newAction.nodeValue = "stopShow(); choosePicture(" + i + ");"; // add attribute: onclick //"stopShow" stopt eine Diashow

1. Vergiss createAttribute und setAttributeNode völlig. Sie sind gänzlich unnötig. Attribute kannst du so setzen: element.attribut = "wert". Oder: element.setAttribute("attribut", "wert"). Wobei du die erste, kürzere Schreibweise bevorzugen kannst.

2. Ausnahme von dieser Regel: Event-Handler. Die setzt du, wenn du maximale Browser-Kompatibilität erreichen willst, immer gemäß diesem Schema:

element.onclick = funktion.

Also hier:

newPicture.pictureNumber = i;  
function clickHandler () {  
   stopShow();  
   choosePicture(this.pictureNumber);  
}  
newPicture.onclick = clickHandler;

Damit hier i im Handler den richtigen Wert hat, habe ich, wie du siehst, die Nummer als Eigenschaft am Elementknoten gespeichert. Im Handler kann man über this auf das img-Elementobjekt und diese Eigenschaft zugreifen.

var newId = document.createAttribute("id"); //set an ID for each Picture to give it more properties in the css-file
newId.nodeValue = "pic";
newPicture.setAttributeNode(newId);

Auch viel zu kompliziert, schreibe einfach:
newPicture.id = "pic";
(Aber wieso gibst du allen Bildern dieselbe ID? Sollte da vielleicht noch die Nummer in die ID?)

Mathias

[webernie]

Viiielen Dank für deine Hilfe!

(Aber wieso gibst du allen Bildern dieselbe ID? Sollte da vielleicht noch die Nummer in die ID?)

Mathias

Die Vorschaubilder bekommen alle dieselben CSS-Eigenschaften (Rahmen), deswegen dieselbe ID.

Nochmal Dank.
Ciao

[molily]

Hallo,

Die Vorschaubilder bekommen alle dieselben CSS-Eigenschaften (Rahmen), deswegen dieselbe ID.

Das macht keinen Sinn.

Eine ID darf nur einmal im Dokument vergeben werden. Das ist der Sinn einer ID, sie soll eindeutig sein und nur EIN Element bezeichnen.

Was du suchst, sind http://de.selfhtml.org/html/attribute/allgemeine.htm#uebersicht@title=Klassen.

Mathias