0
私は、 "defaultPic"と呼ばれるメイン画像用のimgタグと、 "subPic1"と "subPic2"と呼ばれるサブ画像用のもう1つのimgタグを持つミニ画像ギャラリーを作成しようとしています。だから、基本的にデフォルトの画像はsubPic1です。私がしたいのは、ユーザーがsubPic2をクリックすると、defaultPicの画像はsubPic2に置き換えられます。ここでレンダリングされたHTMLのイメージは次のとおりです。javascriptを使用してミニ画像ギャラリーを作成するには？
大きなボックスには、一方小さい方の者がsubPic1とsubPic2ているデフォルトの画像です。私はonclickイベントをサブ画像に追加しようとしましたが、クリックすると画像ソースが取得され、デフォルトの画像に渡されます。しかし、私がクリックしてみるとsubPic2と言うと、onclickイベントは発生せず、何も起こりません。この問題を解決するために私を助け、同じ目標を達成するためのより良い解決策を提供してください。ここで
は、HTMLスクリプトです：function getImage1(){
var img = document.getElementById("subPic1").src;
document.getElementById("defaultPic").src = img;
}
function getImage2(){
var img = document.getElementById("subPic2").src;
document.getElementById("defaultPic").src = img;
}*{
margin: 0;
padding: 0;
}
#defaultPic {
border: 1px solid black;
margin: 5px;
width: 200px;
height: 200px;
}
#subPic1 {
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
}
#subPic2 {
border: 1px solid black;
margin: 5px;
width: 50px;
height: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="Image1.js"></script>
<script src="Image2.js"></script>
</head>
<body>
<img id="defaultPic" src="http://via.placeholder.com/200x200" /><br/>
<img id="subPic1" src="http://via.placeholder.com/50x50" onclick="getImage1()"/><br/>
<img id="subPic2" src="http://via.placeholder.com/50x50" onclick="getImage2()"/>
</body>
</html>
はい、私はちょうど発見したGoogle Chromeでjavascriptが有効になっていないことを確認します。 –
Good !!他のブラウザでもチェックしてください。少なくとも2つのブラウザでコードを確認してください。 – cna327