Question

我在首页有一个客户端徽标列表（Views Block）。图像通过ImageStyle生成（调整大小和去饱和）。因此徽标是灰度的，但我需要它们在鼠标悬停时着色。知道怎么做吗？

如果有办法用css制作图像灰度，我用Google搜索，但无法找到它。或者我无法找到在ImageStyle中制作2个不同图像（一个彩色，一个灰度）的方法。

非常感谢帮助！非常感谢你的时间！

Answer 1

您可以设置两个具有相同尺寸的ImageStyles。

一个是常规的彩色图像，另一个是过滤的图像。设置应该相同（裁剪等），除了一个具有去饱和过滤器。您可以调用一个设置'logo-thumb-normal'和一个'logo-thumb-filtered'

您现在应该有两个输出图像，除了过滤之外它们是相同的，它们应该具有相同的文件名，尽管它们将位于不同的文件夹中。

将您的内容类型图片字段设置为使用'logo-thumb-filtered。'

因此，当您在内容类型中上传图片时，应生成两个文件，每个文件对应一个：

/sites/default/files/styles/logo-thumb-normal/public/field/image/image.jpg和 /sites/default/files/styles/logo-thumb-filtered/public/field/image/image.jpg

你可以像Spudley建议的那样手动引用这两个图像，但更容易使用jQuery在悬停时交换图像（这里有一个简单的例子：http://jsfiddle.net/vSUkv/1/）：

$('.image1').hover(
    function () {
        src = $(this).attr('src');
        $(this).attr('src', src.replace('filtered', 'normal'));
    }, 
    function () {
        $(this).attr('src', src.replace('normal', 'filtered'));
    }
);

修改

在Drupal 7中包含jQuery：

要添加上述脚本，您可以：

通过在主题的scripts[] js/custom.js文件中添加info行，为您的主题添加自定义JavaScript文件。

在主题中创建js文件夹，并在该文件夹中创建custom.js文件。

将以下代码添加到custom.js文件中：

// We define a function that takes one parameter named $. (function ($) { // Store our function as a property of Drupal.behaviors Drupal.behaviors.imageSwap = { attach: function (context, settings) { $('.hplogoclient a img').hover( function () { src = $(this).attr('src'); $(this).attr('src', src.replace('filtered', 'normal')); }, function () { $(this).attr('src', src.replace('normal', 'filtered')); } ); } } }(jQuery));

清除缓存并再次检查。有关详细信息，请参阅http://drupal.org/node/171213。

Answer 2

我认为你需要两个图像;一个用于灰度版本，另一个用于颜色版本。目前您无法在浏览器上轻松进行这种图像处理。（事实上，如果你真的想要使用一些更现代的浏览器功能可以完成，但它可能需要做更多工作，并且在所有浏览器中都不兼容，所以我现在坚持使用两种图像解决方案）

对于双图像解决方案，如果将图像设置为背景图像，那么在CSS中它非常简单：

.myelement {
    background-image:url(/path/to/greyscale.png);
 }

.myelement:hover {
    background-image:url(/path/to/fullcolour.png);
}

您也可以使用CSS'Sprites'来实现，这基本上意味着将两张图片放在一个图像文件中，但设置元素的大小，使得只有图像的相应部分可见;然后在:hover样式中，调整偏移量，以便显示图像的其他部分。

设置CSS精灵比仅仅使用两个单独的图像更加繁琐，但它值得付出努力。详细了解如何操作以及原因：http://css-tricks.com/158-css-sprites/

Answer 3

只使用简单的HTML和CSS有一个非常简单的解决方案：

HTML：

<div id="desaturate"> <a href="/thelink"> <a img src="/sites/default/files/images/yourfolders/image.png" alt="this image is">

CSS：

#desaturate img { opacity:0.4; padding-left: 20px; } #desaturate img:hover { opacity:1.0; }

这是sample and simple tutorial。

Answer 4

您现在可以在CSS中执行此操作，请参阅http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html：

.myimage: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 */
}

.myimage {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}

这样可以节省生成，存储和加载2张图像的费用。

Drupal 7：灰度图像在鼠标悬停时着色。 ImageStyles生成的图像

4 个答案: