1

私は2つの円形の同心divをもう一方に持っています。これらの2つの円をクリックするとアラートを表示する必要があります。

私のHTMLコードは次のようになります：

<div id="circle2" style="position: absolute.display:none;left:14px;top:35px;width:266px;height:266px;background-Color:#EFA927;border-radius:50% 50%;" onclick="alert('2');"></div>

<div id="circle1" style="position: absolute;display:none;left:31.5px;top:52.5px;width:231px;height:231px;background-Color:#0080C0;border-radius:50% 50%;" onclick="alert('1');"></div>

Mozillaの場合はすべて正常に機能しますが、circle1の左上、右上、上から下、左下のクロムの場合、クロムはcircle1のアラートを表示します（円2が予想されます）。

このことを修正する方法はありますか？

4

3 に答える 3

3

私はあなたの質問を完全には理解していませんが、このコードを使用しても問題はありません:

<div id="circle2" style="left:14px;top:35px;width:266px;height:266px;background-Color:#EFA927;border-radius:50% 50%;" onclick="alert('2');"></div>

<div id="circle1" style="left:31.5px;top:52.5px;width:231px;height:231px;background-Color:#0080C0;border-radius:50% 50%;" onclick="alert('1');"></div>

をクリックするcircle1とアラート「1」、クリックするcircle2とアラート「2」が表示されます。

于 2012-10-18T06:53:02.720 に答える
1

イメージ マップを使用してみてください。

http://www.w3.org/TR/2010/WD-html5-20101019/the-map-element.html#image-maps

https://developer.mozilla.org/en-US/docs/HTML/Element/map

https://developer.mozilla.org/en-US/docs/HTML/Element/Img

作業サンプルはこちら

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <img src="concentricCircles_304x304_284x284.png" usemap="#annularMap" alt="Circle within circle">
    <map name="annularMap">
        <area id="inner" shape=circle coords="152,152,142" alt="Red circle" onclick="alert(2);">
        <area id="outer" shape=circle coords="152,152,152" alt="Yellow border" onclick="alert(1);">
    </map>
</p></body>
</html>
于 2012-10-18T07:17:29.647 に答える
0

ここは問題ないと思います。

これをチェックしてください。http://jsfiddle.net/XRdFC/

「on-click」を「onclick」に変更しました。違いを生んだかもしれません。

于 2012-10-18T06:36:49.973 に答える