- ベストアンサー
IE6ではjavascriptが動くのにNN7.1では動かない。
”コンピューター家庭向け”のところでも質問したのですが、回答がないのでここで質問させていただきます。 HTML部分 <div class="galico"> <script language="javascript" src="poser.js"></script> <a href="javascript:showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> SSC部分 .galico { z-index: 3; position: relative; top: 29px; left: -200px; } javascript部分 function showgallery(){ if ( document.all )document.all('gallery').style.visibility ='visible' else if ( document.layers )document.layers['gallery'].visibility ='show' else if ( document.getElementById )document.getElementById('gallery').style.visibility ='visible' } この記述で、IE6では思った通りに動いてくれます。（"../base/gallery.gif"をクリックするとjavascriptを実行してくれる。） ところが、NN7.1では "../base/gallery.gif" に触れても、ステータスバーにjavascriptにリンクするように表示もされないし、クリックしても動きません。 なぜかSSCの "position: relative;" を "position: absolute;" にしてやると動くのですが。。。 なぜでしょうか。わかりやすく教えていただけないでしょうか。
- vvat2
- お礼率38% (13/34)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
再現する為に数値を大幅に変えてます <html> <HEAD> <META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT type="text/javascript"> <!-- function showgallery(){ if(document.getElementById){ document.getElementById("gallery").style.visibility ='visible' } if(document.all){ document.all["gallery"].style.visibility ='visible' } if(document.layers){ document.layers["gallery"].visibility ='show' }} //--> </SCRIPT> </HEAD> <BODY> <div id="Layer1" style="z-index: 3;position: relative;top: 29px;left: 100px;"> <a href="#" onClick="showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> <div id="gallery" style="z-index: 13;background-color: white;position: relative;top: 121px;left: 0px;width: 710px;height: 500px;visibility: hidden;text-align: left;"> <img src="../base/poservvc2.jpg" alt=""> <img src="../base/ggallery.jpg" alt=""> </div> </BODY> </html> これをこのままコピペしてください ※ その他のものを付けずに とりあえず そのままで そして実行してみてください 画像をクリックすると、画像が下側に２つ表示されるはずです お望みの表示になると思います ＮＮ４、ＩＥ６、ＮＮ７で検証済みです そこから、元のＨＴＭＬに移植、数値の訂正を行ってください その後、外部スクリプトにすれば問題の発見が早くなります
その他の回答 (1)
- ganba_daijyoubu
- ベストアンサー率20% (6/29)
SSCじゃなくてCSSですね。 id="gallery"付近のHTMLとCSSも入れてもらえますが。 これだけだと、表示される部分がブラウザーをはみ出してるんじゃないかとしか思えないんですが。
補足
回答ありがとうございます。 HTML部分 <div class="galico"> <script language="javascript" src="poser.js"></script> <a href="javascript:showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> <div class="gallery" id="gallery"> <img src="../base/poservvc2.jpg" alt=""> <img src="../base/ggallery.jpg" alt=""> </div> CSS部分(^^; .galico { z-index: 3; position: relative; top: 29px; left: -200px; } .gallery{ z-index: 13; background-color: white; position: relative; top: -1121px; left: 0px width: 710px; height: 500px; visibility: hidden; text-align: left; } javascript部分 function showgallery(){ if ( document.all )document.all('gallery').style.visibility ='visible' else if ( document.layers )document.layers['gallery'].visibility ='show' else if ( document.getElementById )document.getElementById('gallery').style.visibility ='visible' } もともと全体を align="center" でセンタリングしているので、 left: -200px; でもブラウザからはみ出していません。 id="gallery"も、もともとはブラウザの上部から1300px位のところにあるので、はみ出していません。 分かりにくい説明ですみません。
お礼
回答ありがとうございます。 その間動作確認したら動いたので、その後移植したのですがやはり動きません。 かなりレイヤーを入れ子状にしているので、そこら辺でミスがあるかもしれないので、少しずつ削除して確認していこうと思います。 どこかのサイトで、NNは入れ子にしすぎるとうまく動作が難しくなるというのを見たことあるので、ほかの方法で作ることも考えています。
補足
原因が分かりました。 まったく的外れでした。 間違ったソースの記述をしていたわけではありませんでしたが、 NNでは<div></div>間に<img>を入れると div の横サイズが画面いっぱいに広がってしまいます。 それで div が下のレイヤーとと同色だったり、透明色だったりすると広がっているのが分からない。 だから "クリックイベントやリンクする img" の横に <div><img src="img1"></div> があると、 "クリックイベントやリンクする img"の上に <div><img src="img1"></div> が覆いかぶさり、クリックできなくなっていました。 NNの場合は div の横サイズをきちんと指定してやらなければならないんですね。