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

我正试图找到一种方法来切换点击图像

我有两张照片

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

如果我点击图像，我希望另一个图像被加载到它的位置

我对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=”
促销
';

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

@丹尼斯

这件事我哪里做错了

$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=”
促销
';

好吧，这似乎没有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>
';

$pageContent=”
促销
document.getElementById（\'promoImage\'）。onclick=function（）{
如果（this.src=\'.$docPath./page-1.jpg\'））{
this.src=\'.$docPath./page-2.jpg\'；
}否则{
this.src=\'.$docPath./page-1.jpg\'；
}
};
';

HTML：

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

Javascript：（悬停切换）

---

这些是最简单的技术。有一些使用jQuery或CSS的“更好”解决方案可以将代码从HTML中分离出来。

感谢您的输入！作为javascript的新手，我如何将两者联系起来？请看一看我的文章，我编辑它是为了反映我认为它应该如何工作？不要使用内联onclick属性。把代码放在

…

块中。好的，谢谢，我又更新了我的帖子，请看一看。这似乎是正确的方法，但当我将鼠标悬停在图像上或单击它时，它不会产生任何效果。它可以工作！！！！！！非常感谢你！不过，最后一件事是，当我将光标悬停在图像上时，是否可以将光标更改为链接光标？这很让人困惑，因为除非被告知，否则你不会知道如何单击。@mVChr谢谢，解决了我原来的问题，但丹尼斯给了我一个更好的解决方案：）

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

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