Javascript 在代码中引用图像的问题

如何在JQuery代码中引用我的文件夹中的图像

我想将图像转换为灰度，鼠标翻转时恢复为彩色。但是，我的图像引用不起作用。我尝试了通常的（'folderofimages/myimage'），但不起作用。我尝试了建议的方法（'.myimage folderofimages'），但也不起作用

这是提供代码的网站

这是我的密码

//窗口加载。这将等待图像加载完成，这是必不可少的
$（窗口）。加载（函数（）{
//淡入imagimages/homeneral.jpeges，就这样
//是不是一个彩色的“弹出”文件加载，然后在窗口加载
$（“images.homeannual”）.fadeIn（500）；
//克隆图像
$（'images.homeannual'）。每个（函数（）{
var el=$（本）；
el.css({
“位置”：“绝对”
}).wrap（“”）
.clone（）.addClass（'img_灰度'）
.css({
“位置”：“绝对”，
“z指数”：“998”，
“不透明度”：“0”
}).insertBefore（el）.queue（函数（）{
var el=$（本）；
el.parent（）.css({
“宽度”：这个宽度，
“高度”：这个高度
});
el.dequeue（）；
});
this.src=灰度（this.src）；
});
//淡入图像
$（'images.homeannual'）.mouseover（函数（）{
$（this）.parent（）.find（'img:first'）.stop（）.animate({
不透明度：1
}, 1000);
})
$（'.img_grayscale'）.mouseout（函数（）{
$（this）.stop（）.animate({
不透明度：0
}, 1000);
});
});
//灰度w画布法
函数灰度（src）{
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var imgObj=新图像（）；
imgObj.src=src；
canvas.width=imgObj.width；
canvas.height=imgObj.height；
ctx.drawImage（imgObj，0,0）；
var imgPixels=ctx.getImageData（0,0，canvas.width，canvas.height）；
对于（变量y=0；y

如果更改所有引用

$("images.homeannual")

到

代码实际上是有效的。显然，在您要处理的图像具有类

homeannual

，例如

<img src="1.gif" class="homeannual">

---

David的答案是正确的，但另一方面，使用css，您可以更轻松地实现这一点！这样做可以节省很多时间，而且手上的维护也更少

只用

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale:悬停{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+，Android上的Firefox*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（100%）；/*Chrome 19+、Safari 6+、Safari 6+iOS*/
}

从那里，您可以添加过渡，以获得与示例中相同的效果

---

有关更多详细信息，请参阅

一些标记有助于解决此类问题。

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}