Der Martin: Layer auf sensitive Grafik

Beitrag lesen

Hi,

Wie sieht denn dein Zusammenspiel von HTML, CSS und Javascript aus?

ich habe in deinem Quellcodeauszug Grausames gesehen. Die vermutlich von Dreamweaver erzeugten Funktionen mit dem MM-Präfix sind als Negativbeispiel kaum zu schlagen.

Methode A (primäres Bild als normales img)
Hier habe ich die zu erscheinenden Bilder anfangs mit "position:absolute" und "z-index:10" versehen.

Der z-index dürfte hier völlig irrelevant sein. Absolut positionierte Elemente "schweben" sowieso in einem eigenen Kontext über dem nicht positionierten Rest der Seite, eine Wechselwirkung zwischen den statischen, nicht positionierten Elementen und dem absolut positionierten Bild dürfte gar nicht auftreten.
Wenn das bei dir doch der Fall ist, verschweigst du uns noch etwas Wichtiges, ohne es zu wissen.
Wichtig sind:
 * das Markup (HTML) - also wie stehen das Grundbild uns das überlagerte Bild im HTML zueinander,
   in welchem sonstigen Kontext stehen sie
 * das Stylesheet - also alle CSS-Definitionen, die für das Grundbild, das überlagerte Bild und
   deren Vorfahrenelemente gelten
Eine bestimmte CSS-Eigenschaft mit Javascript umzuschalten (vorzugsweise display zwischen "block" und "none"), ist dann ein Klacks.

Methode B (primäres Bild als img innerhalb eines div-Elements)
Hierbei habe ich die Ebene des primären Bildes mit "position:fixed" und "z-index:1" versehen. Mit den zu erscheinenden Bildern bin ich verfahren wie oben in Methode A.
Auch das gab mir nicht das gewünschte Ergebnis.

position:fixed ist für den Effekt, den du haben willst, völlig unbrauchbar.

Was du brauchst, ist folgendes:
 * das Grundbild (der Kartenausschnitt) als img-Element mit usemap
 * ein Containerelement um das Bild (könnte ein div sein) mit position:relative, damit sich die
   absoluten Positionen daran orientieren können
 * die Overlay-Bilder als weitere Kindelemente des Containers, und zwar absolut positioniert und
   zunächst unsichtbar; außerdem sollten sie durch JS leicht adressierbar sein, z.B. durch eine ID
 * eine JS-Funktion, die durch den onmouseover- und onmouseout-Eventhandler der area-Elemente
   aufgerufen wird und die Overlay-Bilder zwischen sichtbar und unsichtbar umschaltet
Damit solltest du eigentlich zum Ziel kommen.

So long,
 Martin

--
Besteht ein Personalrat aus nur einer Person, erübrigt sich die Trennung nach Geschlechtern.
  (aus einer Info des deutschen Lehrerverbands Hessen)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(