✔ per Array Bilder laden und austauschen

[lylila]

Hallo

Ich versuche über JS dynamisch Bilder auszutauschen und ein CSS Menü dabei farblich modifizieren. Die bisherige Testseite kann man hier sehen.

Ich habe dafür ein 3 dimensionales Array erstellt, wo die ID (Bildnummer), Quelle und Status gespeichert ist.

// Anzahl der einzelnen Bilder + 1 , da dass Array immer bei 0 anfängt und 0 leer ist
var PHOTOS = new Array(16)
var STILLS = new Array(18)
var motion = new Array(5)

for (var i=1; i< PHOTOS.length; ++i) { PHOTOS[i] = new Array (2); PHOTOS[i][0] = "photos/" + [i] + ".jpg"; PHOTOS[i][1] = "off" ; PHOTOS[i][2] = i}
for (var i=1; i< STILLS.length; ++i) { STILLS[i] = new Array (2); STILLS[i][0] = "stills/" + [i] + ".jpg"; STILLS[i][1] = "off" ; STILLS[i][2] = i}
for (var i=1; i< motion.length; ++i) { motion[i] = new Array (2); motion[i][0] = "motion/" + [i] + ".jpg"; motion[i][1] = "off" ; motion[i][2] = i}

function active_u(x,y) { //x = Array , y = Nr. o. Tiefe
// Bild Auswahl
document.getElementById(x[y][2]).src = x[y][0];
for (var i=0; i<x.length; ++i) { x[i][1] = "off" }
x[y][1] = "on";
for (var i=0; i<x.length; ++i) { if(x[i][1] =="on") {document.getElementById(x[i][2]).style.color = "#ff0066";}else{document.getElementById(x[i][2]).style.color = "#ffffff";} }
}

<div id="FOTONAV" style="cursor:pointer; ... "><span class="SUBNAV" id="1"><a onClick="unter_p(0),active_u(PHOTOS,1)">1</a></span> <span class="SUBNAV" id="2"><a onClick="unter_p(1), active_u(PHOTOS,2)">2</a></span> ... </div>

Über alert kann ich sehen, dass die Funktion aufgerufen wird und auch die richtigen Werte für ID und Src ausgegeben werden.
x[y][2] = geklickte Zahl/ID (z.Bsp. 2)
x[y][0] = Quelle

Doch es funktioniert trotzdem nicht. Könnt ihr den Knoten in meinem Kopf lösen ?
Danke

 

[Quaese]

Hi,

du beginnst die Schleifenzählungen bei Null, die Arrays sind jedoch erst ab dem Index 1 mit Werten
belegt.

function active_u(x,y) { //x = Array , y = Nr. o. Tiefe
// Bild Auswahl
document.getElementById(x[y][2]).src = x[y][0];
for (var i=1; i<x.length; ++i) { x[i][1] = "off" }
x[y][1] = "on";
for (var i=1; i<x.length; ++i) { if(x[i][1] =="on") {document.getElementById(x[i][2]).style.color = "#ff0066";}else{document.getElementById(x[i][2]).style.color = "#ffffff";} }
}

Vielleicht hilft dir das ja weiter.

Ciao
Quaese

 

[lylila]

Ja genau, das ist es gewesen. Danke jetzt funktioniert alles.