プロが教える店舗&オフィスのセキュリティ対策術

javascript超初心者です。

どなたか、解決法を教えて頂けないでしょうか?


●解決したい事
onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。

IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。

IEでは出来るので、他のブラウザでも出来るのではないかと思ってしまいます。
何を変えればいいのでしょうか?
どうか宜しくお願いします。


ソース抜粋
<body>

<span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span>

<div id="wrapper" style="position:absolute; top:0px" width="1080" height="1500">
コンテンツ
</div>

</body>


上記のソースのwrapper下側700px部分しか選択できないのです。

どうか宜しくお願いします!
 

A 回答 (2件)

こんにちは。



補足ありがとうございました。

this.style.visibility='hidden'ではなく
this.style.display='none'で画像を表示しないようにすれば下のものが選択できるようになると思います。

visibilityとdisplayの違いは簡単に言うと
見た目の表示非表示(visibility)
要素自体の表示非表示(display)です。

IEはある意味特殊ですのでほかのプラウザと違う動きをする場合があります。
    • good
    • 0
この回答へのお礼

LancerVIIさん

とても早いご対応感謝します!

なるほど!そうゆうことだったんですね。
超初心者の私にご丁寧に教えて頂きありがとうございました!

お礼日時:2012/03/05 10:53

こんにちは。



まず、<div>にwidthとheight属性は無いと思います。
style="position:absolute;top:0px;width:1080px;height:1500;"
で指定するはずです。

また、現在のソースですと画像とは重ならず横に<div id="wrapper">が表示されると思いますがほかに何かスタイル設定していませんか?
top:0px;left:0px;とすれば重なると思いますが、画像が下敷きになります。

やりたいことはwrapperの上に重ねて画像を表示しておき、画像をクリックすると画像が消えるという動きでしょうか?

この回答への補足

LancerVIIさん

回答ありがとうございます。

諸々抜けておりました(汗)
申し訳ありません。

下記をご参照下さい。

ソース抜粋
<body>

<span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span>

<div id="wrapper" style="position:absolute; top:0px;left:0px;z-index:-10;width:1080px;height:1500;">
コンテンツ
</div>

</body>

以上


left:0px;z-index:-10;width:1080px;height:1500;の部分が抜けておりました。

ご指摘の通り、wrapperの上に重ねて画像を表示しておき、画像をクリックすると画像が消える。すると画像で隠れていたwrapperが表示され、選択(リンク選択や文字選択)できるようにしたいです。

IEでは、wrapperを選択できる状況なのですが、他のブラウザでは選択できません。

このやり方ですと、無理なのでしょうか?

補足日時:2012/03/05 09:37
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!