Layer auf sensitive Grafik

[The Heir]

Hallo zusammen,

für die Homepage eines Instituts möchte ich einen Wegweiser/Lageplan im jpg-Format erstellen, auf dem einige Koordinaten verlinkt sind. Dank selfhtml stieß ich auf den Code, bei dem ein jpg als Map mit diversen Links versehen werden kann (s. hier: http://de.selfhtml.org/html/grafiken/anzeige/img_usemap.htm).
Die einzelnen Koordinaten nun mit neuen jpgs oder html-Dateien zu verlinken ist kein Problem. Mein Vorhaben ist es jedoch, die ausgewählten Koordinaten mit einem Mouse-Over-Effekt zu versehen, der ein kleineres Bild auf höherer Ebene (sprich über der eigentlichen Map liegend) öffnet.
Folgendermaßen sollte es aussehen:

Man muss sich nun vorstellen, dass sich die Maus auf dem "A" befindet.

Jetzt kommt das große ABER:
Wenn ich nach der Standardmethode vorgehe, Mouse-Over-Effekte einzufügen, die verschiedene Layer in individueller Höhe über das eigentliche jpg legen sollen, passiert folgendes: Das eigentliche jpg (im diesem Fall die Straßenkarte) verschiebt sich weit nach unten, und das durch Mouse-Over entstehende Layer öffnet sich darüber.
Ich habe bereits mit "position" und "z-index" herum experimentiert, doch das Ergebnis bleibt das gleiche. Das neu erscheinende Layer will und will sich einfach nicht im Vordergrund auf der Map öffnen.

Ich hoffe, dass Ihr mir bei diesem Problem weiterhelfen könnt.
Muss ich vielleicht die Straßenkarte (samt des Codes für senstive Grafiken; Link s.o.) als Hintergrundbild der Seite einfügen??
Schon mal Danke im Voraus.

Mit freundlichen Grüßen
The Heir

[Cheatah]

Hi,

Wenn ich nach der Standardmethode vorgehe, Mouse-Over-Effekte einzufügen, die verschiedene Layer in individueller Höhe über das eigentliche jpg legen sollen,

wie sieht diese aus?

Muss ich vielleicht die Straßenkarte (samt des Codes für senstive Grafiken; Link s.o.) als Hintergrundbild der Seite einfügen??
Schon mal Danke im Voraus.

Nein, sie ist Inhalt, also <img/>. Ob eine Image-Map die beste Lösung ist, sei hingegen dahingestellt.

Cheatah

[The Heir]

Hi,

Wenn ich nach der Standardmethode vorgehe, Mouse-Over-Effekte einzufügen, die verschiedene Layer in individueller Höhe über das eigentliche jpg legen sollen,

wie sieht diese aus?

A) Definition des Scripts
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>

B) Definition der Layer
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:187px;
height:238px;
z-index:1;
left: 33px;
top: 233px;
}
 etc. etc.
-->
</style>

C) Mouse-Over-Funktion auf dem jeweiligen Link
onmouseover="MM_showHideLayers('Name_des_Layers','','show')" onmouseout="MM_showHideLayers('Name_des_Layers','','hide')"

Muss ich vielleicht die Straßenkarte (samt des Codes für senstive Grafiken; Link s.o.) als Hintergrundbild der Seite einfügen??
Schon mal Danke im Voraus.

Nein, sie ist Inhalt, also <img/>. Ob eine Image-Map die beste Lösung ist, sei hingegen dahingestellt.

Zu was würdest du denn stattdessen raten? Bin mittlerweile für jede nur denkbare Möglichkeit offen.

Gruß
The Heir

[Der Martin]

Hallo,

Jetzt kommt das große ABER:
Wenn ich nach der Standardmethode vorgehe, ...

... dann frage ich mich zunächst, was deine Standardmethode ist.

Mouse-Over-Effekte einzufügen, die verschiedene Layer in individueller Höhe über das eigentliche jpg legen sollen, passiert folgendes: Das eigentliche jpg (im diesem Fall die Straßenkarte) verschiebt sich weit nach unten, und das durch Mouse-Over entstehende Layer öffnet sich darüber.

Wie sieht denn dein Zusammenspiel von HTML, CSS und Javascript aus? Eine Lösung ohne Javascript sehe ich im Augenblick nicht; um :hover einsetzen zu können, müssten die überlagerten Bilder Kindelemente von area sein, und das dürfen sie nicht (area ist ein leeres Element).

Ich habe bereits mit "position" und "z-index" herum experimentiert

Der Weg ist richtig, jetzt solltest du mitteilsamer werden!

Ich hoffe, dass Ihr mir bei diesem Problem weiterhelfen könnt.
Muss ich vielleicht die Straßenkarte (samt des Codes für senstive Grafiken; Link s.o.) als Hintergrundbild der Seite einfügen??

Nö. Imagemaps sind auch auf Hintergrundbildern gar nicht möglich, dann müsstest du höchstens normale Links frei auf dem Hintergrund positionieren. Theoretisch möglich, aber IMO nicht sinnvoll.
Außerdem ist der Kartenausschnitt ja Information, nicht Verzierung. Grund genug, ihn auch tatsächlich als Inhalt zu übermitteln.

So long,
 Martin

[The Heir]

Hallo,

... dann frage ich mich zunächst, was deine Standardmethode ist.

s. mein letzter Post

Mouse-Over-Effekte einzufügen, die verschiedene Layer in individueller Höhe über das eigentliche jpg legen sollen, passiert folgendes: Das eigentliche jpg (im diesem Fall die Straßenkarte) verschiebt sich weit nach unten, und das durch Mouse-Over entstehende Layer öffnet sich darüber.

Wie sieht denn dein Zusammenspiel von HTML, CSS und Javascript aus? Eine Lösung ohne Javascript sehe ich im Augenblick nicht; um :hover einsetzen zu können, müssten die überlagerten Bilder Kindelemente von area sein, und das dürfen sie nicht (area ist ein leeres Element).

Ich habe bereits mit "position" und "z-index" herum experimentiert

Der Weg ist richtig, jetzt solltest du mitteilsamer werden!

Methode A (primäres Bild als normales img)
Hier habe ich die zu erscheinenden Bilder anfangs mit "position:absolute" und "z-index:10" versehen. Da dies nicht funktionierte, habe ich "position" auf alle möglichen Einstellungen gesetzt und "z-index" bis auf 25 erhöht. Kein positives Ergebnis.

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.

Gruß
The Heir

[Der Martin]

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