IE6ではjavascriptが動くのにNN7.1では動かない。

解決済

質問者：vvat2
質問日時：2004/09/10 00:44
回答数：2件

”コンピューター家庭向け”のところでも質問したのですが、回答がないのでここで質問させていただきます。

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;" にしてやると動くのですが。。。
なぜでしょうか。わかりやすく教えていただけないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： peron
回答日時：2004/09/10 16:40

再現する為に数値を大幅に変えてます

<html>

<HEAD>

<META http-equiv="Content-Script-Type" content="text/javascript">

<SCRIPT type="text/javascript">

</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>

これをこのままコピペしてください
※　その他のものを付けずに　とりあえず　そのままで
そして実行してみてください
画像をクリックすると、画像が下側に２つ表示されるはずです
お望みの表示になると思います
ＮＮ４、ＩＥ６、ＮＮ７で検証済みです

そこから、元のＨＴＭＬに移植、数値の訂正を行ってください
その後、外部スクリプトにすれば問題の発見が早くなります

この回答への補足

原因が分かりました。
まったく的外れでした。
間違ったソースの記述をしていたわけではありませんでしたが、
NNでは<div></div>間に<img>を入れると div の横サイズが画面いっぱいに広がってしまいます。
それで div が下のレイヤーとと同色だったり、透明色だったりすると広がっているのが分からない。
だから "クリックイベントやリンクする img" の横に　<div><img src="img1"></div>　があると、
"クリックイベントやリンクする img"の上に
<div><img src="img1"></div>　が覆いかぶさり、クリックできなくなっていました。

NNの場合は div の横サイズをきちんと指定してやらなければならないんですね。

補足日時：2004/09/11 00:14

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
その間動作確認したら動いたので、その後移植したのですがやはり動きません。
かなりレイヤーを入れ子状にしているので、そこら辺でミスがあるかもしれないので、少しずつ削除して確認していこうと思います。
どこかのサイトで、NNは入れ子にしすぎるとうまく動作が難しくなるというのを見たことあるので、ほかの方法で作ることも考えています。

通報する

お礼日時：2004/09/10 21:29

No.1

回答者： ganba_daijyoubu
回答日時：2004/09/10 08: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位のところにあるので、はみ出していません。

分かりにくい説明ですみません。