ImageMap mit Verweisen

[Manuela]

Hallo,

ich habe folgende Problem:
Ich habe ein Grafik auf der ich verschiedene ImageMaps angelegt habe nun möchte ich, wenn ich mit meiner Mouse darüber gehe, das sich ein Fenster öffnet (kein Popup), denn wenn der Moucezeiger weg geht schliesst sich auch das Fenster. Auch die Größe und Position des Fensters muss veränderbar sein. Zusätzlich möchte ich nicht mit Grafiken arbeiten.
Wer kann mir helfen!!

[Cheatah]

Hi,

Ich habe ein Grafik auf der ich verschiedene ImageMaps angelegt habe nun möchte ich, wenn ich mit meiner Mouse darüber gehe, das sich ein Fenster öffnet (kein Popup), denn wenn der Moucezeiger weg geht schliesst sich auch das Fenster. Auch die Größe und Position des Fensters muss veränderbar sein. Zusätzlich möchte ich nicht mit Grafiken arbeiten.

äh. Wenn ich Dich richtig verstanden habe möchtest Du ein Fenster, das kein Popup ist, und eine ImageMap ohne Grafik? Erstaunlich. Aber was genau ist denn nun Dein Problem? Abgesehen von den genannten Widersprüchen, versteht sich.

Cheatah

[Chris©]

Hallo,

wozu soll das "Fenster" denn genutzt werden? Meint Du vielleicht eine Title-Box? Die kann man doch einfach mit title="bla bla" in die Referenz einbinden.

Oder soll es ein größerer Kasten sein? Dann musst Du wohl mit JavaScript und <DIV style="visability:hidden;"> arbeiten.

Das kann man ja auch in einer Class festlegen und nur die Positionen und die Größe in der Elementauszeichnung festlegen.

Dann schreibst Du ungefähr so:

<script ...>

function show(Element)
{
  window.getElementById(Element).style.visability = true;
}

function hide(Element)
{
  window.getElementById(Element).style.visability = false;
}

</script>

<map name="lageplan">
  <area shape="circle" coords="108,318,10"
        alt="Trio Quartett Pentagon"
        title="Trio Quartett Pentagon"
        onMouseover="show("D1");" onMouseout="hide("D1");">

<area shape="rectangle" coords="5,5,10,10,"
        alt="Eins zwei drei"
        title="Eins zwei drei"
        onMouseover="show("D2");" onMouseout="hide("D2");">

<!-- und so weiter -->

</map>

<div style="position:relative;  ...">
<img src="..." usemap="#lageplan" width="600px" height="400px"></img>

<div id="D1" style="visibility:hidden; position:relative; left:xpx; top:ypx; z-index:2;">hier der Text für D1</div>

<div id="D2" style="visibility:hidden; position:relative; left:xpx; top:ypx; z-index:2;">hier der Text für D2</div>

</div>

Habs nicht ausprobiert, aber als Diskussionsgrundlage sollte es genügen.

Grüße

Chris©

[Chris©]

Hallo,

<div style="position:relative;  ...">
<img src="..." usemap="#lageplan" width="600px" height="400px"></img>

<div id="D1" style="visibility:hidden; position:absolute;
left:xpx; top:ypx; z-index:2;">hier der Text für D1</div>

<div id="D2" style="visibility:hidden; position:absolute; left:xpx; top:ypx; z-index:2;">hier der Text für D2</div>

So dürfte es besser funktionieren.
Musst beim Hüll-DIV noch an Margin:0 denken, sonst gibts den Standard-Abstand

Grüße

Chris©

[Orlando]

Hi Manuela,

wenn ich mit meiner Mouse darüber gehe, das sich ein Fenster öffnet (kein Popup), denn wenn der Moucezeiger weg geht schliesst sich auch das Fenster. Auch die Größe und Position des Fensters muss veränderbar sein. Zusätzlich möchte ich nicht mit Grafiken arbeiten.

löst

http://aktuell.de.selfhtml.org/tippstricks/css/infobox/

dein Problem? Wenn es unbedingt DHTML sein muss, suche nach "overlib".

Grüße,
 Roland