onClickで画像を消し、下の部分を選択する方法

2023/08/16 05:52

このQ&Aのポイント

javascript超初心者です。onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。
IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。何を変えればいいのでしょうか？
上記のソースのwrapper下側700px部分しか選択できないのです。

ベストアンサー

onClickで画像を消し、下の部分を選択する方法

2012/03/04 22:48

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部分しか選択できないのです。どうか宜しくお願いします！　

maqmaq_1128
お礼率66% (2/3)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/05 10:15 回答No.2

こんにちは。補足ありがとうございました。 this.style.visibility='hidden'ではなく this.style.display='none'で画像を表示しないようにすれば下のものが選択できるようになると思います。 visibilityとdisplayの違いは簡単に言うと見た目の表示非表示(visibility) 要素自体の表示非表示(display)です。 IEはある意味特殊ですのでほかのプラウザと違う動きをする場合があります。

質問者

お礼 2012/03/05 10:53

LancerVIIさんとても早いご対応感謝します！なるほど！そうゆうことだったんですね。超初心者の私にご丁寧に教えて頂きありがとうございました！

その他の回答 (1)

LancerVII
ベストアンサー率51% (1060/2054)

2012/03/05 08:28 回答No.1

こんにちは。まず、<div>にwidthとheight属性は無いと思います。 style="position:absolute;top:0px;width:1080px;height:1500;" で指定するはずです。また、現在のソースですと画像とは重ならず横に<div id="wrapper">が表示されると思いますがほかに何かスタイル設定していませんか？ top:0px;left:0px;とすれば重なると思いますが、画像が下敷きになります。やりたいことはwrapperの上に重ねて画像を表示しておき、画像をクリックすると画像が消えるという動きでしょうか？

質問者

補足 2012/03/05 09:37

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

画像を重ねて表示する方法を知りたいです。
おせわになっております。下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると（IEでも同じです。）下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて（IEは小さな資格に×マーク）上に表示されるはずだった画像が表示できませんどうしたらいいでしょうか？
- ベストアンサー
- HTML
ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
ディスプレイのサイズに合わせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- CSS
1カラムのリキッドレイアウトについて。
１カラムのサイトを作っています。背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div> 　→これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。文章などのコンテンツがないため、背景画像が全画面で表示されないのです。どのようにしたら意図する表示が可能でしょうか？できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。
- 締切済み
- CSS
写真と文字の大きさをそろえたい
ビルダーを使いながらやっているのですが二つのものを左右に並べて上下同じ大きさで表示したいのですが、下記では同じ大きさになっていると思うのですが、大きさが（上下の大きさのみ※左右は異なってよいのですが）ことなって表示されてしまいます。解決方法を教えてください。。。 <DIV style="width : 191px;height : 335px;top : 94px;left : 157px; position : absolute; z-index : 10;" id="Layer8" class="hpb-lb-tb1-cell1" align="center"> <SPAN class="hpb-body4"><SPAN STYLE="line-height:1"><span style="font-size:15pt"> <B><STRONG>ここに文字</STRONG></B></SPAN></SPAN></SPAN> </DIV> <DIV style="width : 412px;height : 295px;top : 94px;left : 347px; position : absolute; z-index : 9; " id="Layer9" class="hpb-lb-tb1-cell2" align=""><IMG src="hpb_i_top10.jpg" alt="イメージ" width="412" height="295"></DIV>
- ベストアンサー
- ホームページ作成ソフト
IE6でナビ下に隙間ができてしまいます。
横並びのナビの下に隙間無く内容を入れたいのですが、IE6だとナビ下に２ミリ位の隙間ができてしまいます。いろいろ調べてIE6対策でline-height: 0・margin: 0を追加してもうまくいきません。何が間違っているのか、ご支持お願いします。 <body> <div id="wrapper"> <div id="headnavi"> <ul> <li id="A"><a href=""><span>A</span></a></li> <li id="B"><a href=""><span>B</span></a></li> <li id="C"><a href=""><span>C</span></a></li> <li id="D"><a href=""><span>D</span></a></li> <li id="E"><a href=""><span>E</span></a></li> <li id="F"><a href=""><span>F</span></a></li> </ul> </div> <div id="pro_back"> <p>○○○○○</p> </div> </div> </body> </html> *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } body { width: 100%; font-size: 75%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; line-height: 180%; color: #333; } #wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } #pro_back { width: 960px; height: 623px; background-image: url(images/pro_back.gif); background-repeat: no-repeat; margin: 0; } #headnavi { width:960px; height: 33px; margin: 0; } #headnavi ul { line-height: 0; margin: 0; } #headnavi ul li a { display: block; width: 172px; text-decoration: none; height: 33px; } #headnavi ul li a span { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; } ul li#A a { position: absolute; left: 890px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/topbotan.gif); margin: 0; } ul li#B a { position: absolute; left: 632px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/link.gif); margin: 0; } ul li#C a { position: absolute; left: 474px; top: 0px; background-repeat: no-repeat; background-image: url(images/mail.gif); margin: 0; } ul li#D a { position: absolute; left: 316px; top: 0; background-repeat: no-repeat; background-image: url(images/illustration.gif); margin: 0; } ul li#E a { position: absolute; left: 158px; top: 0; background-repeat: no-repeat; background-image: url(images/designwork.gif); margin: 0; } ul li#F a { position: absolute; left: 0px; top: 0; background-position: 0 0; background-repeat: no-repeat; background-image: url(images/profile.gif); margin: 0; }
- 締切済み
- CSS
float: leftで横に並べたら、サファリだけ
float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。ＩＥやファイヤーフォックスではピッタリ表示できています。問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？
- ベストアンサー
- HTML
マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、以下の通りにUPすると「エラー」が出てしまいます。どこが悪いのか解らないのでよろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript
footerの背景が切れて、背景画像が見えてしまう
かなりハマってしまいまして、ご相談させて下さい。添付画像の上の図になる形で下記コードにてhtml/cssを記載しました。青のimg.bgはウィンドウ幅によって比率を保ったまま横100%で可変します。 containerの縦幅は決まっていて、img.bgがウィンドウ幅が横に広がっても、 container、contents、footerはz-indexで上に乗せ、あくまでもcontainerの高さ600pxのみが表示できるようにしています。通常のウィンドウサイズや縦にウィンドウを伸ばした場合は問題ないのですがウィンドウを横一杯に伸ばした時に（添付画像の下の図）footerの下から img.bgが見えてしまいます。 wrapperで縦横100%の値にしていて、footerの背景画像もimg.bgを隠せる十分な長さのものを用意しているのですが、最後のcopyrightを入れた所から切れてしまいます。横一杯に伸ばした際に、img.bgの長さに合わせてfooterで隠すにはどのようにしたら良いでしょうか？ご指導の程、どうぞ宜しくお願い致します。下記、不要部分は省いたcss/html記載いたします。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ html,body{ width:100%; height:100%; position:relative; } #wrapper{ width:100%; min-height:100%; height:100%; background-color:red: position:relative; } body > #wrapper{ height:auto; } img.bg { /* Set rules to fill background */ min-width:1000px; min-height:586px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: absolute; top:0; left:0; z-index: 0; } #container { width:95%; height:500px; position: relative; overflow: hidden; z-index: 4; } #contents{ width:100%; background-color: green; position: relative; z-index: 2; } #footer{ width:100%; background: url(../img/footer_black.jpg) left top repeat-x; background-color: black; position: relative; z-index: 3; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ HTML ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head>...略...</head> <body> <div id="wrapper"> <img class="bg" src="img/blue_BG_pic.jpg" alt="" /> <div id="container">...略...</div> <div id="contents">...略...</div> <div id="footer">...略...</div> </div> </body> </html>
- 締切済み
- CSS
onClick関数
作成したclear()が呼ばれません。 function定義の直下に、alert()を入れてもダイアログボックスの表示がでません。 htmlタグの設定がダメなのでしょうか?  <div style="position:absolute; top:65px; left:737px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1710" value="クリア" name="Check1710" onClick="clear(1)"; runat="server" /> </div> <div style="position:absolute; top:114px; left:737px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1720" value="クリア" id="Check1720" onclick="clear(2);" runat="server" /> </div> //jsファイル function clear(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }
- ベストアンサー
- JavaScript