overflow:hidden in div. Browsen

[Yogilein]

Guten Abend,

ich nutze folgenden Code:

1. CSS

#k0{position:absolute;z-index:1;top:200px;left:260px;width:60px;height:60px;overflow:hidden;border-radius:100%;}

2. HTML

<div id="k0">
<img src="../Spiele/EdZ/0.png" border="0" name="image4" alt="" onclick="module.innen10(0);" onmouseout="na_restore_img_src('image4','document')" onmouseover="na_change_img_src('image4','document','../Spiele/EdZ/02.png', true);">
</div>

Das eingefügte Bild ist ein runder Button.

Im IE + FF wird das Bild als Kreis erkannt. Sprich, beim Darüberfahren mit der Maus ändert sich das Bild erst, wenn auch der Kreis berührt wird.

In Chrome und Opera dagegen ändert sich das Bild bereits, wenn der Berührungspunkt zwar innerhalb des rechteckigen Bildes aber außerhalb des Kreises liegt, z.B. bei der Koordinate 60,60.

Aufwändig geht es, wenn das Bild ein Hintergrundbild ist, aber hat noch jemand eine Idee, wie man das besser machen kann?

 

[Yogilein]

Schade, dass noch niemand eine Idee hat.

Hier ist mein Proggi zur Veranschaulichung, das noch nicht auf Hintergrundbilder umgestellt ist. Bei IE + FF funzt es, bei Chrome + Opera nicht:

YogiSpiele - Wein

Falls es nicht verstanden wurde: Im IE + FF findet der Rollover-Effekt nur statt, wenn genau der runde Button überfahren wird, in Opera + Chrome auch dann, wenn der unsichtbare, rechteckige Tel des Bildes überfahren wird.

 

[Yogilein]

Ich habe jetzt auch "Wein" mit der Hintergrundbildtechnik versehen, so dass für mich vorerst das Problem behoben ist. Nichtsdestotrotz wäre ich an einer besseren Lösung interessiert.

 

[kkapsner]

Eventuell könnte es funktionieren, wenn du die mouseover und -out Events auf das div und nicht auf das <img> setzt.