<!DOCTYPE html>
<html>
<body>
<img id = "imageOne" src = "circleRed.png" onclick = "changeColor()"/>
<script>
var image = document.getElementById("imageOne");
function changeColor() {
if (image.src == "circleRed.png") {
image.src = "circleBlue.png";
} else {
image.src = "circleRed.png";
}
}
</script>
</body>
</html>
这整个计划似乎有效,但没有。我只能改变一次图像的颜色。第二次点击后,没有任何反应。我的意思是我只能将颜色从红色变为蓝色。 你能帮我解决一下原因吗?
答案 0 :(得分:1)
以下是解决方案:
<!DOCTYPE html>
<html>
<body>
<img id ="imageOne" src ="circleRed.png" onclick = "changeColor()"/>
<script>
var image = document.getElementById("imageOne");
function changeColor()
{
if (image.getAttribute('src') == "circleRed.png")
{
image.src = "circleBlue.png";
}
else
{
image.src = "circleRed.png";
}
}
</script>
</body>
</html>
答案 1 :(得分:1)
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png")
{
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
}
else
{
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
}
}
</script>
点击此STACKOVERFLOW链接==&gt; Change an image with onclick()
感谢名单
答案 2 :(得分:0)
var image = document.getElementById("imageOne");
在if语句
之前移动此函数答案 3 :(得分:0)
image.src
返回图像的物理路径。因此,您可以使用indexOf
来匹配图像名称。以下代码段可能会对您有所帮助。
function changeColor(image) {
if (image.src.indexOf("circleRed.png")>-1) {
image.src = "circleBlue.png";
} else {
image.src = "circleRed.png";
}
}
&#13;
<img id = "imageOne" src = "circleRed.png" onclick = "changeColor(this)"/>
&#13;
答案 4 :(得分:0)
尝试此代码。只需确保使用(img.src.match) 。然后在体内编写脚本。
var img = document.getElementById("image1");
img.addEventListener("mouseover", function(){
if(img.src.match("images/image1.jpg")){
img.src ="images/image1_2.jpg";}
else {
img.src = "images/image1.jpg"
}
})
<img src="images/image1.jpg" id="image1" />
答案 5 :(得分:0)
function changeColor(image) {
if (image.src.indexOf("circleRed.png")>-1) {
image.src = "circleBlue.png";
} else {
image.src = "circleRed.png";
}
}
<img id = "imageOne" src = "circleRed.png" onclick = "changeColor(this)"/>