悬停上的jquery灰度

没有人知道是否有办法在悬停时创建图像灰度 - 除了创建2个独立的图像和更改src。悬停上的jquery灰度

感谢

编辑 - SEMI的工作代码...：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="scripts/pixastic-1.custom.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var img = $(".test img") 

    $('.test').hover(function() { 
     $('img', this).pixastic("desaturate"); 
    }, function() { 
     $(this).html(img); 
    }); 

}); 
</script>

和

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" /> 
</div>

我如何修改这个工作如果在页面上有一个DIV ...像这样...

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/family_woods.jpg" width="100" height="100" alt="" /> 
</div> 

<div class="test" style="padding:25px; width:200px; background-color:#F96"> 
    <img class="pic" src="images/home/mainImage/another_image.jpg" width="100" height="100" alt="" /> 
</div>

来源

2010-10-09 Tom

可能的解决方案：http：// stackoverflow。com/questions/2474333/jquery-convert-image-to-grayscale – Alec 2010-10-09 15:24:03

你可能想检查这个演示： http://www.sohtanaka.com/web-design/examples/hover-over-trick/ – 2010-10-09 15:25:27

这是通过使用[两张图片]（http://www.sohtanaka.com/web-design/examples/hover-over-trick/sushiandrobots_thumb.gif）。 – Alec 2010-10-09 15:27:25

尝试其中之一（B OTH用帆布）：

javascript image processing library - 去色
Desaturate tutorial

来源

2010-10-09 16:14:41 Mottie

最好的解决方案是由@Alec建议的解决方案，标记为<canvas>。另一个非常棘手，尽管它更具跨浏览器兼容性，但我不知道它对于较大图像的效果如何。这将使AJAX调用悬停在PHP脚本上，将图像URL作为参数发送，并让PHP脚本返回灰度图像。如果你需要更多的细节，我会为你写一个简短的脚本。

来源

2010-10-09 15:27:23 Claudiu

作为一种替代的jQuery但不ajdusting实际图像源的含2个图像，我认为它可能使闪存内的图像灰度用一个简单的flash动画，超过等

这看起来处理鼠标像物有所值：http://www.flashcomponents.net/component/as2_luminosity_gray_scale_utility.html

[不附属于这一切的组件...]

来源

2010-10-09 15:36:41

下面是使用一种解决方案“一”的形象，作为you'll明显看出，它实际上是两个图像粘在一起，我不确定这是否有帮助，希望它有用！

BTW没有jQuery的，只是CSS

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a>

CSS：

.myButtonLink { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: url('/path/to/myImage.png') bottom; 
    text-indent: -99999px; 
} 
.myButtonLink:hover { 
    background-position: 0 0; 
}

来源：

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

来源

2010-10-09 16:09:23 Trufa

@fudgey真的很好的脚本，爱他们！你知道浏览器兼容性吗？ – Trufa 2010-10-09 16:45:59

Pixastic脚本显示它在我链接的页面上具有兼容性。只是你知道，灰度/去饱和度功能内置于IE中：'img.style.filter ='progid：DXImageTransform.Microsoft.BasicImage（grayScale = 1）';' – Mottie 2010-10-11 15:46:24

@fudgey对不起！你完全正确，完全错过了！谢谢 – Trufa 2010-10-11 16:40:34

如果Pixastic是矫枉过正，你可以试试我的简单的jQuery插件：jquery-grayscale

你运行它想：

$('img').grayscale();

它利用了<canvas>所以它不适用于旧版浏览器。

来源

2011-04-28 08:24:01

悬停上的jquery灰度

回答

相关问题