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

[Siechfred]

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

[Gunnar Bittersmann]

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

[steckl]

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

[Gunnar Bittersmann]

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

[Axel Richter]

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

[Gunnar Bittersmann]

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

[Axel Richter]

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

[Gunnar Bittersmann]

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

[Siechfred]

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

[Gunnar Bittersmann]

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

[Siechfred]

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