单击对象时，我想将图像更改为其他图像。代码按以下顺序堆叠：
<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>
我想做的是，当我点击<li> 时，我想将图像更改为图像的彩色版本，即其他图像。现在，我知道我可以使用 JQuery/JS 来完成它。但是我不想用大量的 JS 代码来完成这么简单的事情。
可以用更简单的方法来完成吗？像伪选择器？ .active班级？
我似乎想不起来。
【问题讨论】：
标签： javascript html css
要使用 javascript 更改图像 onclik，您需要具有 id 的图像：
<p>
<img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
</p>
然后你可以在点击图片时调用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>
如果当前 img.src 设置为 minimize.png，则此代码会将图像设置为 minimize.png，反之亦然。 欲了解更多详情，请访问： Change image onclick with javascript link
【讨论】：
或者也许 就是这样
<img src="path" onclick="this.src='path'">【讨论】：
这个怎么样？它不需要这么多的编码。
$(".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>【讨论】：
如果您的图片已命名，您可以通过 DOM 引用它们并更改来源。
document["imgName"].src="../newImgSrc.jpg";
或
document.getElementById("imgName").src="../newImgSrc.jpg";
【讨论】：
您最多只能在悬停 LI 时触发背景图像更改。如果您希望在单击 LI 时发生某些事情并保持这种状态，那么您需要使用一些 JS。
我会以 bw_ 和 clr_ 开头的图像命名，然后使用 JS 在它们之间进行交换。
示例：
$("#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);
});
【讨论】：
这里，当点击next或previous时，img标签的src属性变为数组中的next或previous值。
<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>
我可以通过修改这个答案来实现这一点：jQuery array with next and previous buttons to scroll through entries
【讨论】：
如果你不想使用js，我想，你可以使用<a href="javascript:void(0);"></a>而不是img，然后使用css like
a {
background: url('oldImage.png');
}
a:visited {
background: url('newImage.png');
}
编辑：不。抱歉，它仅适用于:hover
【讨论】：
你可以试试这样的：
CSS
div {
width:200px;
height:200px;
background: url(img1.png) center center no-repeat;
}
.visited {
background: url(img2.png) center center no-repeat;
}
HTML
<div href="#" onclick="this.className='visited'">
<p>Content</p>
</div>
【讨论】：
此脚本有助于在单击文本时更改图像：
<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>
【讨论】：
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";
}
}
}
}
【讨论】：