- ベストアンサー
onClickで画像を消し、下の部分を選択する方法
- javascript超初心者です。onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。
- IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。何を変えればいいのでしょうか？
- 上記のソースのwrapper下側700px部分しか選択できないのです。
- maqmaq_1128
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 補足ありがとうございました。 this.style.visibility='hidden'ではなく this.style.display='none'で画像を表示しないようにすれば下のものが選択できるようになると思います。 visibilityとdisplayの違いは簡単に言うと 見た目の表示非表示(visibility) 要素自体の表示非表示(display)です。 IEはある意味特殊ですのでほかのプラウザと違う動きをする場合があります。
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 まず、<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を選択できる状況なのですが、他のブラウザでは選択できません。 このやり方ですと、無理なのでしょうか？
お礼
LancerVIIさん とても早いご対応感謝します！ なるほど！そうゆうことだったんですね。 超初心者の私にご丁寧に教えて頂きありがとうございました！