MouseOver und MouseOut in Verbindung mit einer Usemap: MouseOver und MouseOut in Verbindung mit einer Usemap

Beitrag lesen

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