悬停和onClick图像交换

-1

我有5个不同的图像被用作锚。我希望有一个图像替换悬停和保持整个点击行动的图像。然后保留该新图像，直到点击了具有相同类的另一个图像。我不确定如何实现这个功能。该守则如下。谢谢你们提前。悬停和onClick图像交换

HTML

<img class="year" id="yr60" src="/images/1960-a.jpg" style="height:24px;margin-left:132px;position:relative;top:-150px;width:96px;" /> 
<img class="year" id="yr70" src="/images/1970-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" /> 
<img class="year" id="yr80" src="/images/1980-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" /> 
<img class="year" id="yr90" src="/images/1990-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" /> 
<img class="year" id="yr20" src="/images/2000-a.jpg" style="height:24px;margin-left:55px;position:relative;top:-150px;width:96px;" />

每个悬停图像是SRC = “/图片/ 1960-h.jpg” | src =“/ images/1970-h.jpg”| SRC = “/图片/ 1980-h.jpg” 等

来源

2013-07-02 ac12

[whathaveyoutried.com]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – Dharman

我只是做这个作为排序的大脑锻炼，所以即使我知道你没有完全遵守规则，我希望你能从中获得一些用处。 http://jsfiddle.net/8GPNP/

function replaceold(sel) { 
$(sel).each(function() { 
    oldvalue = $(this).attr("src").replace("-h", "-a"); 
    $(this).attr("src", oldvalue); 
}); 
} 
$("img").on("mouseenter",function(e) { 
    newvalue = $(this).attr("src").replace("-a", "-h"); 
    $(this).attr("src", newvalue); 
}); 

$("img").on("click",function() { 
    $("img").removeClass("selected"); 
    $(this).addClass("selected"); 
}); 

$("img").on("mouseleave",function() { 
    //reset all src 
    replaceold('img:not(.selected)'); 
});

来源

2013-07-02 16:49:02

您可以使用SRC attr()

在eachloop你可以改变src

$(document).ready(function(){ 
$("img") 
     .mouseover(function() { 
      $(this).attr("src", "newSrc"); 
     }); 
     .mouseout(function() { 
      $(this).attr("src", "OldSrc"); 
     });});

来源

2013-07-02 16:30:11

你也许可以用CSS解决这个

img.year:before { 
    content: ''; 
} 
img.year:hover, img.year:active, img.year:focus { 
    content: ''; 
} 
img#yr60:hover:before, img#yr60:active:before, img#yr60:focus:before { 
    content: url("/images/1960-h.jpg"); 
} 
img#yr70:hover:before, img#yr70:active:before, img#yr70:focus:before { 
    content: url("/images/1970-h.jpg"); 
} 
img#yr80:hover:before, img#yr80:active:before, img#yr80:focus:before { 
    content: url("/images/1980-h.jpg"); 
} 
img#yr90:hover:before...

这样的事情应该工作。

来源

2013-07-02 17:06:36 Callan

悬停和onClick图像交换

回答

相关问题