javascriptのサムネイル画像ギャラリー

JavaScriptで画像サムネイルを作っていますが、画像をクリックしても動きません。同じような方法をリストしたいのですが。 this is my page i want to make javascriptのサムネイル画像ギャラリー

これは私のコード

<div id="imgstyle" onclick="changeImage(event)"> 
    <image class="imgstyle" src="images/r1.jpg" /> 
    <image class="imgstyle" src="images/r2.jpg" /> 
    <image class="imgstyle" src="images/r3.jpg" /> 
    <image class="imgstyle" src="images/r4.jpg" /> 
    <image class="imgstyle" src="images/nw.jpg" /> 
</div> <br><br>

function changeImage(event) 
{ 
event = event || window.event; 

var targetElement = event.target || event.srcelement; 

      if(targEtelement.tagname == "IMG") 
      { 
document.getelEmentbyid("mainImage").src = targetElement.getAttribute("src"); 
      } 

} 

</script>

出典

2017-09-27 minn

JavaScriptの識別子を使用すると、間違った文字を大文字の複数のインスタンスを持って、大文字と小文字が区別されます。 – DarthJDG

スニペットまたはhttps://jsfiddle.net/を使用してコードを更新してください。 – core114

@ core114 jsfiddleで更新するのではなく、スニペットを作成する方が良いです。 –

変更このことから、この行です：

document.getelEmentbyid("mainImage").src = targetElement.getAttribute("src");

から

document.getElementById("mainImage").src = targetElement.getAttribute("src");

出典

2017-09-27 08:44:47

ありがとうございます – minn

心配しないでください - 将来のユーザーのための答えとしてこれをマークできますか？ありがとう –

しかし、1つの問題があります、私は別の側面と6つの側面と同じようにそれをPLZを得る方法を伝えることができるように使用したい。 – minn

あなたのJSは非常にうんざりです。プロパティとメソッド名の大文字と小文字が間違っていたため、JSが動作しませんでした。

function changeImage(event) { 
 
    event = event || window.event; 
 
    
 
    var targetElement = event.target || event.srcelement; 
 

 
    if (targetElement.tagName == "IMG") { 
 
    document.getElementById("mainImage").src = targetElement.getAttribute("src"); 
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 
.imgstyle { 
 
    display: block; 
 
    float: left; 
 
    width: 20%; 
 
} 
 

 
.imgstyle + .imgstyle { 
 
    border-left: 1px solid; 
 
}

<img height="250" width="550" style="border:4px solid grey" src="https://placehold.it/550x250?text=A" id="mainImage" /> 
 
<br /> 
 
\t 
 
<div id="imgstyle" onclick="changeImage(event)"> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=A" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=B" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=C" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=D" /> 
 
    <image class="imgstyle" src="https://placehold.it/550x250?text=E" /> 
 
</div> \t 
 
<br><br>

出典

2017-09-27 08:53:44 Thijs

javascriptのサムネイル画像ギャラリー

答えて

関連する問題