nicht angemeldet
bei 'onclick' auf 'area' an Bildobjekt kommen
Gunnar Bittersmann
0 0 Gunnar Bittersmann
bei 'onclick' auf 'area' an Bildobjekt kommen
Gunnar Bittersmann
Hello out there!
Ich erstelle dynamisch eine Image-Map und ein Array von Bildobjekten:
const COLS = 42;
const ROWS = 42;
const PARENT = foo; // ein bestehendes Element-Objekt
var map = document.createElement("map");
document.body.appendchild(map);
map.name = "myMap";
var area = document.createElement("area");
map.appendchild(area);
area.shape = "poly";
area.coords = "0, 0, 42, 0, 0, 42";
area.onclick = clicked;
var icons = new Array();
for (var col = 0; col < COLS; col++)
{
icons[col] = new Array();
for (var row = 0; row < ROWS; row++)
{
icons[col][row] = new Icon(col, row);
}
}
function Icon(col, row)
{
var icon = document.createElement("img");
icon.col = col;
icon.row = row;
icon.src = "bar";
icon.useMap = "#myMap";
}
function clicked()
{
// ???
}
Im Scope der Funktion 'clicked()' bezieht sich 'this' auf das 'area'-Element, bei dessen 'onclick'-Ereignis die Funktion aufgerufen wird. Wie aber komme ich an die Indizes 'col', 'row' desjenigen Bildes, auf das geclickt wurde?
See ya up the road,
Gunnar
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
Im Scope der Funktion 'clicked()' bezieht sich 'this' auf das 'area'-Element, bei dessen 'onclick'-Ereignis die Funktion aufgerufen wird. Wie aber komme ich an die Indizes 'col', 'row' desjenigen Bildes, auf das geclickt wurde?
Wie wäre es, dem einzelnen Bild einen click-Handler zu verpassen?
Siechfred
--
Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.-
Hello out there!
Wie wäre es, dem einzelnen Bild einen click-Handler zu verpassen?
Nicht gut. Ich will doch nicht auf das ganze Bild clicken können, sondern nur auf einen Teil davon.
Bei den Stellen, wo der 'onclick'-Handler des 'area'-Elements feuert, feuert aber der des 'img'-Elements nicht.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hi,
Wie wäre es, dem einzelnen Bild einen click-Handler zu verpassen?
Nicht gut. Ich will doch nicht auf das ganze Bild clicken können, sondern nur auf einen Teil davon.
Weiss nicht ob dich das weiterbringt, aber wie waers mit einem onmouseover/onmouseout fuer die images, bei denen du dann das aktuell ueberfahrene (mir ist grad kein besseres Wort eingefallen) Bild in eine globale Variable speicherst.
mfG,
steckl-
Hello out there!
Weiss nicht ob dich das weiterbringt, aber wie waers mit einem onmouseover/onmouseout fuer die images
Auch nicht gut. Auch 'onmouseover'/'onmouseout' fürs 'img' feuern nur dort, wo keine 'area' ist.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
Hallo,
Wie wäre es, dem einzelnen Bild einen click-Handler zu verpassen?
Nicht gut. Ich will doch nicht auf das ganze Bild clicken können, sondern nur auf einen Teil davon.
Bei den Stellen, wo der 'onclick'-Handler des 'area'-Elements feuert, feuert aber der des 'img'-Elements nicht.
Eben, dann mach Dir das zunutze ;-) Lege das AREA genau dort hin, wo nicht geklickt werden können soll und gib dem IMG den click-Handler.
Das Problem beim Klicken auf ein AREA-Element ist ja, dass dieses im DOM gar nichts mit dem IMG-Element zu tun hat. Es liegt im DOM im MAP-Element, welches wiederum bei Dir im BODY-Element liegt.
viele Grüße
Axel
-
Hello out there!
Lege das AREA genau dort hin, wo nicht geklickt werden können soll
Ich hatte den Code für die Problembeschreibung vereinfacht. In Wahrheit sind es mehrere Areas (mit jeweils anderen Funktionen*), die die ganzen Bilder bedecken.
Das Problem beim Klicken auf ein AREA-Element ist ja, dass dieses im DOM gar nichts mit dem IMG-Element zu tun hat. Es liegt im DOM im MAP-Element, welches wiederum bei Dir im BODY-Element liegt.
Wenn du's so sagst ... ;-) Heißt also, es geht nicht. Kann gar nicht.
See ya up the road,
Gunnar* und diese brauchen als Parameter noch Spalten- und Zeilenindex des jeweiligen Bildes
--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hallo,
Ich hatte den Code für die Problembeschreibung vereinfacht. In Wahrheit sind es mehrere Areas (mit jeweils anderen Funktionen*), die die ganzen Bilder bedecken.
Aha!
Das Problem beim Klicken auf ein AREA-Element ist ja, dass dieses im DOM gar nichts mit dem IMG-Element zu tun hat. Es liegt im DOM im MAP-Element, welches wiederum bei Dir im BODY-Element liegt.
Wenn du's so sagst ... ;-) Heißt also, es geht nicht. Kann gar nicht.
Das würde ich so sehen. Auch nachdem ich einiges ausprobiert habe. Z.B. mal Event.target und das Event-bubbling angesehen...
* und diese brauchen als Parameter noch Spalten- und Zeilenindex des jeweiligen Bildes
Meiner Meinung nach musst Du auf das Konzept MAP/AREA verzichten und die Klick-Koordinaten aus MouseEvent.clientX/.clientY unter Beachtung von Event.target(bzw. this).offsetTop/.offsetLeft ziehen. Dann kann das IMG bei Klick die gesetzten Eigenschaften col und row liefern.
viele Grüße
Axel
-
Hello out there!
Meiner Meinung nach musst Du auf das Konzept MAP/AREA verzichten
Das wäre äußerst unangenehm. Bei meiner Gestalt der Areas wäre es deutlich aufwändiger, aus den Bild-Koorinaten des Clicks auf dem Bild die jeweilige Area zu bestimmen als aus den Viewport-Koorinaten bei Click auf eine Area das jeweilige Bild zu bestimmen. Glücklicherweise geht es ja auch so rum.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
-
Nicht gut. Ich will doch nicht auf das ganze Bild clicken können, sondern nur auf einen Teil davon.
Ja, irgendwie habe ich deinen Code nicht so ganz durchschaut. Im Forumsarchiv habe ich eine kleine Funktion zum Ermitteln der Mauskoordinaten gefunden, die könnte man wie folgt einbauen:
area.onclick = function(evt) { if (!evt) evt = window.event; var p = mouse_pos(evt); alert(p.left + " " + p.top); }Ob dir die Mauskoordinaten allerdings was nutzen, musst du entscheiden :)
Siechfred
--
Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.-
Hello out there!
Ob dir die Mauskoordinaten allerdings was nutzen, musst du entscheiden :)
Da die Bilder absolut positioniert sind, tun sie das. Muss ich halt die Pixelkoordinaten in Spalten- und Zeilenindex umrechnen.
Nicht schön, aber machbar.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Ob dir die Mauskoordinaten allerdings was nutzen, musst du entscheiden :)
Da die Bilder absolut positioniert sind, tun sie das. Muss ich halt die Pixelkoordinaten in Spalten- und Zeilenindex umrechnen.
Nicht schön, aber machbar.Ach komm', so ein bisschen Addition solltest du doch hinbekommen ;))
Siechfred
--
Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.
-
-
-
-