srcとonclickを前後のボタンで切り替えるには？

Question

こんにちは私はゲームのファンのガイドページに取り組んでいますが、私は今後これ以上ヘルプを探すことはありません。

私は、前の矢印と次の矢印をクリックして、次のまたは前のimgを取得する方法が必要です。

これはすべて私にとって新しいものであり、多くのテストを受けていますが、何も仕事がありません。誰もが私を助けてくれることを願っています。

今、私は自分のhtmlがissusを作っているのを見ましたが、私は修正があり、今は自分のhtmlを投稿できます。

私はより良いビュー分割のためにCSSスタイルとHTMLを持っていますが、私のhtmlではビューポート用のメタとメタがあります。

編集：sry、でも私は考えている間違いがあります。私はwohleのdivの内容を変更する必要がある写真を変更するには十分ではありません。クリックで

explaneは、次の次のコードのdivのid = "カード2" クラス= "card_content"

a img { 
 
    border:none; 
 
} 
 

 
.card_overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    z-index: 1001; 
 
} 
 

 
.card_content { 
 
    display: none; 
 
    position: absolute; 
 
    height:600px; 
 
    width:305px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -258px; 
 
    margin-left: -156px; 
 
    padding: 6px; 
 
    background-color: black; 
 
    z-index: 1002; 
 
    overflow: auto; 
 
} 
 

 
#card_icons { 
 
    width:299px; 
 
    border:0; 
 
} 
 

 
.card_case { 
 
    background-image: url(http://file2.npage.de/014720/85/bilder/case.png); 
 
    background-repeat: no-repeat; 
 
    height:435px; 
 
    width:299px; 
 
    border:0; 
 
} 
 

 
.switch_card { 
 
position:relative; 
 
z-index:1003; 
 
margin-top:-235px; 
 
margin-left:-5px; 
 
} 
 

 
#back_to { 
 
position:relative; 
 
z-index:1003; 
 
margin-top:203px; 
 
margin-left:0px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
    <a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" /></a> 
 
    <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" /></a> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 

 

 

 
<div id="card1" class="card_content"> 
 
    <table id="card_icons"> 
 
    <tr> 
 
    <td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td> 
 
    <td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td> 
 
    <td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td> 
 
    </tr> 
 
    </table> 
 
    <table class="card_case"> 
 
    <tr> 
 
    <td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td> 
 
    </tr> 
 
    </table> 
 

 
    <div class="switch_card"> 
 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
     <td align="left"><a href="previous card"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></a></td> 
 
     <td>&nbsp;</td> 
 
     <td align="right"><a href="next card"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></a></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="back_to"><a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a></div> 
 
</div> 
 

 
<div id="card2" class="card_content"> 
 
    <table id="card_icons"> 
 
    <tr> 
 
    <td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td> 
 
    <td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td> 
 
    <td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td> 
 
    </tr> 
 
    </table> 
 
    <table class="card_case"> 
 
    <tr> 
 
    <td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png"> 
 
    </td> 
 
    </tr> 
 
    </table> 
 

 
    <div class="switch_card"> 
 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
     <td align="left"><a href="previous card"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></a></td> 
 
     <td>&nbsp;</td> 
 
     <td align="right"><a href="next card"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></a></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="back_to"><a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a></div> 
 
</div> 
 

 

 
<div id="fade" class="card_overlay"></div>

Answer 1

にdiv要素のid = "カード1" クラス= "card_content" を変更する必要がありますあなたを助けるかもしれません。

// index.html 
<img src="01.png" id="pic"> 

// script.js 
document.getElementById("pic").setAttribute("src", "02.png") 

Answer 2

それは

<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='non‌​e';document.getEleme‌​ntById('fade').style‌​.display='none';docu‌​ment.getElementById(‌​'card2').style.displ‌​ay='block';document.‌​getElementById('fade‌​').style.display='bl‌​ock'" unselectable="off">

で行わ得たが、どのように私はJavaScriptを作ります：script.js