两个图像 - 如果图像被点击，显示其他图像？

Question

我试图找到一种方法来点击图像。

我有两个图像。

我有一个页面，在这个页面上我有一个显示的图像。

如果我点击图片，我希望将其他图片加载到它的位置。

我知道一些关于html和css，以及少一些关于php。我假设正确的方式去做这将是使用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> 
'; 

好吧，这似乎没有onclick效果？

$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").onclick = function() { 
    if(this.src == "first.jpg"){ 
     this.src = "second.jpg"; 
    } else { 
     this.src = "first.jpg"; 
    } 
}; 

的Javascript：（悬停切换）

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

这是最简单的方法。有更好的解决方案使用jQuery或CSS来从HTML中分离代码。