两个图像 - 如果单击图像，则显示其他图像？

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 分开。