1

私は（非常に）シンプルなCSS画像ギャラリーを持っています。Firefoxでは動作しますが、ChromeやSafariでは動作しません。理由がわかりません...小さいサムネイルをクリックすると、bixプレビューボックスで画像を変更したいのですが、このコードは少し厄介な購入ですImはまだ学習中ですが、Firefox（サイトの構築時に使用したもの）では機能するが、サファリやクロームでは機能しない理由を理解できるようです。また、画像ギャラリーができれば素晴らしいと思います。ユーザーがipadを使用しているが、それを機能させることができない場合に使用します...

<htmL>
<div class="contentbox">

<div class="gallery" align="center">
<h3></h3><br/>

<div class="thumbnails">
<img  onClick="preview.src=img1.src"  id="img1" src="gallery/img1.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img2.src" id="img2" src="gallery/img2.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img3.src" id="img3" src="gallery/img3.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img4.src" id="img4" src="gallery/img4.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img5.src" id="img5" src="gallery/img5.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img6.src" id="img6" src="gallery/img6.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img7.src" id="img7" src="gallery/img7.jpg" alt="Image Not Loaded"/>
<img  onClick="preview.src=img8.src" id="img8" src="gallery/img8.jpg" alt="Image Not Loaded"/>
</div><br/>                   

<div class="preview" align="center">
 <img id="preview" src="./gallery/img1.jpg" alt="No Image Loaded"/>
</div>

</div> 

 </div>

</html>

----CSS----

.contentbox {
    width: 1200px;
    height: 790px;
    border: none;
    margin: auto;
    padding-top: 0px;
    margin-top: 40px;
    font-family: champagne; sans-serif; 

}

.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.thumbnails img:hover {
    border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}

------------

助けてくれてありがとう:-)

4

1 に答える 1

0

を使用する代わりに、を使用preview.src=img1.srcする必要がありますdocument.getElementById('preview').src=document.getElementById('img1').src。

さらに良いことに、ジェネリック関数を作成する必要があります：

function setPreviewImage(targetId) {
    document.getElementById('preview').src = document.getElementById(targetId).src 
}

scriptタグに入れてください。そして、すべてのimg要素で次のように使用します：

onclick="setPreviewImage(this.id)"
于 2013-02-16T17:48:13.520 に答える