javascript - 两个图像 - 如果单击图像是否显示其他图像？

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>
';

如有任何意见，我们将不胜感激，谢谢!

@丹尼斯

我哪里出错了？

$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 分开的“更好”解决方案。