2016-07-22 11 views
0

Ich muss die Farbe jedes Bildes ändern, das eine bestimmte X-Koordinate enthält. Der Code, den ich jetzt verwende, gibt mir jedoch nur den #scrollwrapper-Container und nicht das einzelne Bild, das sich an diesem Ort befindet.Identifizieren von Img-Tag nach Koordinaten

var xHome = window.innerWidth/2; 
     var yHome = window.innerHeight/2; 
     var pElement = document.elementFromPoint(xHome, yHome); 
     alert (pElement.className); 

Dies wird Wrapper Container auf den Bildern, aber nicht das bestimmte Bild, das dort ist. Die Seite ist coolaidhouse.com/projectcaptured

Sie können den Scroller dort sehen. Ich möchte die Bilder auf der Seite des "aktiven" Elements dimmen, das im Grunde das Bild ist, das der Mitte am nächsten ist.

Wenn ich das Bild basierend auf seinen Koordinaten bekommen könnte, könnte ich den Rest erledigen. Allerdings kann ich nicht herausfinden, wie man das Bild anstelle des Containers bekommt.

Hier ist, was das Endergebnis sollte folgendermaßen aussehen: Notice middle image is active looking

+0

Wie kann ich dies als die Antwort markieren? –

+0

Mein Kommentar war ein Vorschlag, aber ich habe ihn jetzt als Antwort gepostet, da er dein Problem gelöst hat. –

Antwort

0

Die Antwort in Rick Hitchcock war Kommentar. Ich weiß nicht, wie ich einen Kommentar als Antwort markieren soll. Die Bilder waren tatsächlich noch nicht geladen.

2

Ihr Code erfasst das Bild, wenn es über die Konsole ausgeführt wird. Daher müssen Sie warten, bis das Bild geladen wird, bevor Sie den Code ausführen.

IMG-Elemente haben ein onload Ereignis, das Sie für diesen Zweck verwenden können.