MouseOver und MouseOut in Verbindung mit einer Usemap

[MouseOver und MouseOut in Verbindung mit einer Usemap]

Hallo zusammen,

ich habe folgendes Problem:

Auf meiner Seite sind mehrere Images vorhanden, bei denen beim MouseOver-Event die Padding-Parameter des Styles zu geändert werden sollen und beim MouseOut-Event wieder zurück gesetz werden.

Das ist auch soweit kein Problem. Jetzt habe ich aber jedem Image (alle ähnlich aufgebaut) die selbe Usemap zugeordnet. Jetzt bekomme ich sobald ich in einen Bereich einer Area komme das MouseOut-Event auf dem Image und die Padding-Parameter werden wieder zurückgesetzt, obwohl sich der Mousezeiger noch auf dem Bild ist.

Kann ich das irgendwie steuern das er nur dann ein MouseOut event bekommt, wenn er wirklich die Grafik verläst und nicht wenn er die Usemap betritt?

Hier noch die Code-Schnippel:

Image

<img src="..." ID="imgZahn21" style="padding-bottom:15px" usemap="#Zahnbereiche" onMouseover="return MouseOver(event, this,1)" onMouseout="return MouseOut(event, this,1)"/>

UseMap

<map name ="Zahnbereiche" id="ZahnbereicheMap">
<area shape="poly" id="Wurzel" coords="6,25,31,25,26,2,11,2" href="#" alt="Wurzel" onclick="MouseClick(event, this,18)"/>
<area shape="poly" id="OM" coords="5,25,10,25,35,25,27,36" href="#" alt="Oben" onclick="MouseClick(event, this,18)"/>
</map>

MOUSE-EVENTS

function MouseOver(e, img, oben) {
    if (oben == "1") {
        img.style.paddingTop    = 15+"px";
        img.style.paddingBottom =  0+"px";
    }
    else {
        img.style.paddingTop    =  0+"px";
        img.style.paddingBottom = 15+"px";
    }
}

function MouseOut(e, img, oben) {
    if (oben == "1") {
        img.style.paddingTop    =  0+"px";
        img.style.paddingBottom = 15+"px";
    }
    else {
        img.style.paddingTop    = 15+"px";
        img.style.paddingBottom =  0+"px";
    }
}

Vielen Dank für Eure Hilfe

Tini

[basti_p]

Hi,

Du könntest beim Mouseover auf das Bild eine Variable setzen (z.B. over=1), die dann beim Mouseout abgefragt wird - wenn over==1, dann padding  zurücksetzen. Dieselbe Variable kannst Du dann auch beim Mouseover der Areas auf 1 setzen. Beim Mouseout des Bildes wird dann over auf 0 gesetzt, so das das Zurücksetzen ausgeführt wird.
Evtl. musst Du das Zurücksetzen mit einem setTimeout etwas verzögern, falls sich Mousover und Mouseout in die Quere kommen.

Grüße Basti