OnMouseOver/Out mit zwei Layern-wie gehts?

[Steffi]

Ich möchte ein kleines plus rechts unten auf der seite positioniern, wenn die maus drüberfährt kommt eine ImageMap zum Bewerten der Seite. Mein Chef meint, ich muss das mit zwei Layern machen, kriegs aber beim besten Willen nicht hin.

Quelltext:

<script type="text/JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "plus.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "logo1.gif"; /* erste Highlight-Grafik */
function Bildwechsel(Bildnr,Bildobjekt) {
 window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->

</script>

dann eben der zwischenteil
und unten die MAp und MouseOverfunktion:

<div style="position:absolute; bottom:20px; right:40px;"
     onMouseOver="Bildwechsel(1,Highlight1)"
     onMouseOut="Bildwechsel(1,Normal1)"><img src="plus.gif" border="0"  alt="Seitenbewertung" usemap="#logo1"></div><br>

<MAP NAME="logo1">
  <AREA SHAPE=RECT COORDS="74,107,106,136" HREF="http://www.orf.at"  ALT="sehr positiv"  >
  <AREA SHAPE=RECT COORDS="109,107,140,136" HREF="www.sms.at"  ALT="positiv"  >
  <AREA SHAPE=RECT COORDS="144,97,175,132" HREF="www.ontec.at"  ALT="mittelmäßig"  >
  <AREA SHAPE=RECT COORDS="175,79,204,109" HREF="www.oebb.at"  ALT="negativ"  >
  <AREA SHAPE=RECT COORDS="187,54,227,76" HREF="www.wavetours.de"  ALT="sehr negativ"  >
  <AREA SHAPE=RECT COORDS="48,81,144,94" HREF='javascript: var e=window.open("kommentar1.html","Fenster1","width=490,height=240,left=0,top=0");'>
</MAP>

[Guido]

Hi Steffi,

wenn du einfach nur die Quelle änderst, ändert sich die Größe des Bildes nicht, d.h. das zweite Bild wird auf die Größe des kleinen Plus zusammengequetscht. Du müsstest dann also auch immer die Größen der Bilder einbeziehen.
Ich würde dir allerdings empfehlen mit zwei Layern bzw. DIVs zu arbeiten und und die dann über die 'visibility'-funktion ein- bzw. auszublenden (visible/hidden).

Wenn du noch Fragen dazu hast - email me.

Viele Grüße, Guido

[Motz]

Hi Steffi,

wenn du einfach nur die Quelle änderst, ändert sich die Größe des Bildes nicht, d.h. das zweite Bild wird auf die Größe des kleinen Plus zusammengequetscht. Du müsstest dann also auch immer die Größen der Bilder einbeziehen.
Ich würde dir allerdings empfehlen mit zwei Layern bzw. DIVs zu arbeiten und und die dann über die 'visibility'-funktion ein- bzw. auszublenden (visible/hidden).

Wenn du noch Fragen dazu hast - email me.

Viele Grüße, Guido

Ich würde es auch mit zwei divs machen (s.u.) machen. Aber wenn man auf der Imagemap noch Sachen anklicken soll, ist onmouseover/onmouseout nicht so toll, oder? Evtl. mit onklick lösen.

<div id="div1" style="z-index:2; position:absolute; left:???; top:???; width:??px; height:??px">
   <img src="Plus.gif" width="??px"; height="??px">
   <div id="div2" style="visibility:hidden; z-index:3;        position:absolute; left:??; top:??; width:???; height:???">
        Imagemap hier rein
     </div>
</div>

...

<script language="JavaScript">
div1.onmouseover = function(){div2.style.visibility='visible';}
div1.onmouseout = function(){div2.style.visibility='hidden';}
</script>

etwas in der Art

Tschau Motz

[Motz]

Hi Steffi,

wenn du einfach nur die Quelle änderst, ändert sich die Größe des Bildes nicht, d.h. das zweite Bild wird auf die Größe des kleinen Plus zusammengequetscht. Du müsstest dann also auch immer die Größen der Bilder einbeziehen.
Ich würde dir allerdings empfehlen mit zwei Layern bzw. DIVs zu arbeiten und und die dann über die 'visibility'-funktion ein- bzw. auszublenden (visible/hidden).

Wenn du noch Fragen dazu hast - email me.

Viele Grüße, Guido

Ich würde es auch mit zwei divs machen (s.u.) machen. Aber wenn man auf der Imagemap noch Sachen anklicken soll, ist onmouseover/onmouseout nicht so toll, oder? Evtl. mit onklick lösen.

<div id="div1" style="z-index:2; position:absolute; left:???; top:???; width:??px; height:??px">
   <img src="Plus.gif" width="??px"; height="??px">
   <div id="div2" style="visibility:hidden; z-index:3;        position:absolute; left:??; top:??; width:???; height:???">
        Imagemap hier rein
     </div>
</div>

...

<script language="JavaScript">
div1.onmouseover = function(){div2.style.visibility='visible';}
div1.onmouseout = function(){div2.style.visibility='hidden';}
</script>

etwas in der Art

Tschau Motz

Hab gerade mal ein wenig herumprobiert.
Wenn du das sichtbarwerdende Bild über das erste positionierst, kannst du auch bei onmouseout von diesem die Sichbarkeit auf hidden setzen und solange darauf herumklicken. Die Maus ist ja dann über beiden Bildern oder wasauchimmer.

<div id="div1" style="z-index:2; position:absolute; left:???; top:???; width:??px; height:??px">
   <img src="Plus.gif" width="??px"; height="??px">
   <div id="div2" style="visibility:hidden; z-index:3;        position:absolute; left:-10; top:-10; width:???; height:???">
        Imagemap hier rein
     </div>
</div>

...

<script language="JavaScript">
div1.onmouseover = function(){div2.style.visibility='visible';}
div2.onmouseout = function(){div2.style.visibility='hidden';}
</script>

Tschau Motz