Javascript 使用 onclick() 更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6764961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change an image with onclick()
提问by amit
I want to change an image to some other image when i click on the object. the code is stacked in the following order:
当我单击对象时，我想将图像更改为其他图像。代码按以下顺序堆叠：
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
What i wish to do is, when i click on the
我想要做的是，当我点击
Can it be done using something simpler? Like pseudo selectors? .active class??
I cannot seem to think of it.
可以使用更简单的东西来完成吗？像伪选择器？.active 类？？
我似乎想不出来。
回答by Markweb
To change image onclik with javascript you need to have image with id:
要使用 javascript 更改图像 onclik，您需要拥有带有 id 的图像：
<p>
<img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
</p>
Then you could call javascript function when image is clicked:
然后您可以在单击图像时调用 javascript 函数：
<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>
This code will set image to maximize.png if current img.src is set to minimize.png and vice versa. For more details visit: Change image onclick with javascript link
如果当前 img.src 设置为 minimum.png，则此代码将设置 image 为 maximum.png，反之亦然。有关更多详细信息，请访问： 使用 javascript 链接更改图片 onclick
回答by anymousse
Or maybe and that is prob it
或者也许这就是概率
<img src="path" onclick="this.src='path'">回答by Clayton
If your images are named you can reference them through the DOM and change the source.
如果您的图像已命名，您可以通过 DOM 引用它们并更改源。
document["imgName"].src="../newImgSrc.jpg";
or
或者
document.getElementById("imgName").src="../newImgSrc.jpg";
回答by Bel
How about this?
这个怎么样？
Doesnt requier so much coding
不需要那么多编码
$(".plus").click(function(){
$(this).toggleClass("minus") ;
}).plus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_blue.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
.plus.minus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_minus.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="plus">CHANGE</div></a>回答by Collin G.
The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you'll need to use some JS.
您最多可以做的是在悬停 LI 时触发背景图像更改。如果您希望在单击 LI 时发生某些事情，然后保持这种状态，那么您需要使用一些 JS。
I would name the images starting with bw_ and clr_ and just use JS to swap between them.
我会命名以 bw_ 和 clr_ 开头的图像，然后使用 JS 在它们之间进行交换。
example:
例子：
$("#images").find('img').bind("click", function() {
var src = $(this).attr("src"),
state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr';
(state === 'bw') ? src = src.replace('bw_','clr_') : src = src.replace('clr_','bw_');
$(this).attr("src", src);
});
link to fiddle: http://jsfiddle.net/felcom/J2ucD/
小提琴链接：http: //jsfiddle.net/felcom/J2ucD/
回答by addzies
Here, when clicking next or previous, the src attribute of an img tag is changed to the next or previous value in an array.
在这里，当单击 next 或 previous 时，img 标签的 src 属性将更改为数组中的下一个或上一个值。
<div id="imageGallery">
<img id="image" src="http://adamyost.com/images/wasatch_thumb.gif" />
<div id="previous">Previous</div>
<div id="next">Next</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
var images = [
"http://placehold.it/350x150",
"http://placehold.it/150x150",
"http://placehold.it/50x150"
];
var imageIndex = 0;
$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#image").attr(images[0]);
});
</script>
I was able to implement this by modifying this answer: jQuery array with next and previous buttons to scroll through entries
我能够通过修改这个答案来实现这一点：jQuery array with next and previous按钮滚动条目
回答by M. Lak
This script helps to change the image on click the text:
此脚本有助于在单击文本时更改图像：
<script>
$(document).ready(function(){
$('li').click(function(){
var imgpath = $(this).attr('dir');
$('#image').html('<img src='+imgpath+'>');
});
$('.btn').click(function(){
$('#thumbs').fadeIn(500);
$('#image').animate({marginTop:'10px'},200);
$(this).hide();
$('#hide').fadeIn('slow');
});
$('#hide').click(function(){
$('#thumbs').fadeOut(500,function (){
$('#image').animate({marginTop:'50px'},200);
});
$(this).hide();
$('#show').fadeIn('slow');
});
});
</script>
<div class="sandiv">
<h1 style="text-align:center;">The Human Body Parts :</h1>
<div id="thumbs">
<div class="sanl">
<ul>
<li dir="5.png">Human-body-organ-diag-1</li>
<li dir="4.png">Human-body-organ-diag-2</li>
<li dir="3.png">Human-body-organ-diag-3</li>
<li dir="2.png">Human-body-organ-diag-4</li>
<li dir="1.png">Human-body-organ-diag-5</li>
</ul>
</div>
</div>
<div class="man">
<div id="image">
<img src="2.png" width="348" height="375"></div>
</div>
<div id="thumbs">
<div class="sanr" >
<ul>
<li dir="5.png">Human-body-organ-diag-6</li>
<li dir="4.png">Human-body-organ-diag-7</li>
<li dir="3.png">Human-body-organ-diag-8</li>
<li dir="2.png">Human-body-organ-diag-9</li>
<li dir="1.png">Human-body-organ-diag-10</li>
</ul>
</div>
</div>
<h2><a style="color:#333;" href="http://www.sanwebcorner.com/">sanwebcorner.com</a></h2>
</div>
see the demo here
回答by Andres Ilich
回答by Molecular Man
If you don't want use js, I think, you can use <a href="javascript:void(0);"></a>instead of imgand then use css like
如果您不想使用 js，我认为，您可以使用<a href="javascript:void(0);"></a>代替img然后使用 css 之类的
a {
background: url('oldImage.png');
}
a:visited {
background: url('newImage.png');
}
EDIT: Nope. Sorry it works only for :hover
编辑：不。抱歉，它仅适用于:hover
回答by Cherryishappy
function chkicon(num,allsize) {
var flagicon = document.getElementById("flagicon"+num).value;
if(flagicon=="plus"){
//alert("P== "+flagicon);
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
document.images["pic"+num].src = "../images/minus.gif";
document.getElementById("flagicon"+num).value = "minus";
}else if(flagicon=="minus"){
//alert("M== "+flagicon);
document.images["pic"+num].src = "../images/plus.gif";
document.getElementById("flagicon"+num).value = "plus";
}else{
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
}
}
