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部分しか選択できないのです。
どうか宜しくお願いします!
No.2ベストアンサー
- 回答日時:
こんにちは。
補足ありがとうございました。
this.style.visibility='hidden'ではなく
this.style.display='none'で画像を表示しないようにすれば下のものが選択できるようになると思います。
visibilityとdisplayの違いは簡単に言うと
見た目の表示非表示(visibility)
要素自体の表示非表示(display)です。
IEはある意味特殊ですのでほかのプラウザと違う動きをする場合があります。
LancerVIIさん
とても早いご対応感謝します!
なるほど!そうゆうことだったんですね。
超初心者の私にご丁寧に教えて頂きありがとうございました!
No.1
- 回答日時:
こんにちは。
まず、<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を選択できる状況なのですが、他のブラウザでは選択できません。
このやり方ですと、無理なのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
bxsliderにて読み込み後に内容...
-
Javascriptで指定した日付と時...
-
onclickで自分自身の画像を変更...
-
JavaScript で flexslider の画...
-
Ajaxで画像の削除
-
スライダーを実装した場合、ペ...
-
画像をドラッグ&ドロップで移...
-
textareaに画像を表示したい
-
jQueryスライドショー画像への...
-
JavaScript スライドの画像にリ...
-
target="new"を書き込む場所
-
クリッカブルマップにロールオ...
-
smartRolloverのカスタマイズに...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
読み込んだQRコードをフォーム...
-
JSPでの画像ファイル表示
-
【jQuery】遅延実行(タイムラ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
JavaScript スライドの画像にリ...
-
画面の表示位置を指定させて表...
-
1枚の画像をクリックして複数の...
-
JavaScript で flexslider の画...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
textareaに画像を表示したい
-
prettyphotoの画像表示について
-
Gifアニメ、最後のコマに行った...
-
画像をフォルダから自動読み込み。
-
Javascriptで指定した日付と時...
-
ページ読込中に表示が崩れるの...
-
JavaScriptとチェックボックス...
-
jQueryで特定のURLの時のみ表示
-
各フォルダから1枚ずつ画像をラ...
-
画像の重なりの順序を代える方...
-
特定の画像を非表示にする方法
-
image.onload = .. の後に imag...
-
重なった画像にクリックイベン...
おすすめ情報