2枚の画像 - 画像をクリックすると他の画像を表示しますか？

Question

私はクリック時に画像を切り替える方法を見つけようとしています。

私は2つの画像を持っています。

私はこのページに1ページあります。私はこのページに画像の1つを表示しています。

画像をクリックすると、他の画像がその場所にロードされます。

私は、htmlとcssについて少し知っています。私はこれについて行く正しい方法は、JavaScriptの使用になると仮定しています。残念ながら、私はこれについて何も知らない。

これまでの私のコードは、私がしたいことですが、この画像をクリックすると.../page-2.jpgが読み込まれています。

$pageContent = ' 
<h2>Promotions</h2> 
<div class="promo-img"> 
<img src="'.$docPath.'/page-1.jpg" alt="Page 1" name="Page 1" width="100%" height="150%" id="page1" style="background: #FFF; display:block;" /> 
</div> 
'; 

ここに入力していただければ幸いです。ありがとうございます！

@Dennis

ここで私は間違っていますか？

$pageContent = ' 
<h2>Promotions</h2> 
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF; display:block;" 
onClick="document.getElementById(\'promoImage\').onclick = function() { 
if(this.src == \''.$docPath.'/page-1.jpg\'){ 
    this.src = \''.$docPath.'/page-2.jpg\'; 
} else { 
    this.src = \''.$docPath.'/page-1.jpg\'; 
} 
};" /></div> 
'; 

これはオンクリック効果がないようですか？

$pageContent = ' 
<h2>Promotions</h2> 
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF;" /></div> 
<script type="text/javascript"> 
document.getElementById(\'promoImage\').onclick = function() { 
if(this.src == \''.$docPath.'/page-1.jpg\'){ 
    this.src = \''.$docPath.'/page-2.jpg\'; 
} else { 
    this.src = \''.$docPath.'/page-1.jpg\'; 
} 
}; 
</script> 
'; 

Answer 1

HTML：

<img id="image" src="first.jpg"> 

Javascriptを：

document.getElementById("image").onmouseover = function() { 
    this.src = "second.jpg"; 
}; 
document.getElementById("image").onmouseout = function() { 
    this.src = "first.jpg"; 
}; 

これらは、最も単純な技術である（ホバーを切り替えるために）：

document.getElementById("image").onclick = function() { 
    if(this.src == "first.jpg"){ 
     this.src = "second.jpg"; 
    } else { 
     this.src = "first.jpg"; 
    } 
}; 

のJavascript（切り替えるためにクリックしてください）。 HTMLからコードを分離するjQueryやCSSを使用する「より良い」ソリューションがあります。