Drupal 7: изображение в градациях серого, окрашенное при наведении мыши. изображение, созданное с помощью ImageStyles - PullRequest
Новая
       14

Drupal 7: изображение в градациях серого, окрашенное при наведении мыши. изображение, созданное с помощью ImageStyles

2 голосов
/ 31 июля 2011

У меня есть список клиентских логотипов (Блок просмотра) на главной странице. Изображения генерируются с помощью ImageStyle (изменение размера и обесцвечивания). Так что логотипы в оттенках серого, но мне нужно, чтобы они были окрашены при наведении курсора мыши. Есть идеи, как это сделать?

Я погуглил, если есть способ сделать изображение в градациях серого с помощью css, но не могу его найти. или я не могу найти способ сделать 2 разных изображения (одно цветное, одно оттенки серого) в ImageStyle.

Помощь очень ценится! Большое спасибо за ваше время!

Ответы [ 4 ]

4 голосов
/ 01 августа 2011

Вы можете установить два стиля изображения, оба с одинаковыми размерами.

Одно - обычное цветное изображение, другое - фильтрованное. Настройки должны быть одинаковыми (обрезка и т. Д.), За исключением того, что у них есть фильтр десатурации. Вы можете назвать одну настройку «logo-thumb-normal» и одну «logo-thumb-selected» *

Теперь у вас должно быть два одинаковых выходных изображения, за исключением фильтрации, и они должны иметь одинаковое имя файла, хотя они будут в разных папках.

Установите тип изображения в поле «Изображение», чтобы использовать «logo-thumb-filters».

Итак, когда вы загружаете изображение в тип контента, должно генерироваться два файла, по одному для каждого параметра:

/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'));
    }
);

EDIT:

Чтобы включить JQuery в Drupal 7:

Чтобы добавить скрипт выше, вы можете:

  • Добавьте пользовательский файл JavaScript в свою тему, если вы этого еще не сделали, добавив строку scripts[] js/custom.js в файл info своей темы.

  • Создайте папку 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));
0 голосов
/ 07 мая 2014

Теперь вы можете сделать это в 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 изображения.

0 голосов
/ 13 января 2013

Существует очень простое решение, использующее только простой 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; }

Вот пример и простой учебник .

0 голосов
/ 01 августа 2011

Я думаю, вам понадобятся два изображения для этого; один для версии в оттенках серого и один для цветной версии. Вы не можете легко сделать такие манипуляции с изображениями в браузере в данный момент. (на самом деле, можно сделать, если вы действительно хотите, используя некоторые из более современных функций браузера, но это, вероятно, потребовало бы намного больше работы и не было бы совместимо во всех браузерах, поэтому Я бы придерживался решения с двумя изображениями)

Для решения с двумя изображениями, если вы установите изображение в качестве фонового изображения, тогда в 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 /

...