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

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

1 个答案: