Как отредактировать img src onmouseover?

Question

На сайте с большим количеством изображений я хотел бы добавить событие mouseover для каждого из них.

я мог бы сделать это следующим образом:

<img class="brand" 
    src="img/brands-grey/image1.svg" 
    onmouseover="this.src='img/brands/image1.svg';" 
    onmouseout="this.src='img/brands-grey/image1.svg';"/> 
<img class="brand" 
    src="img/brands-grey/image2.svg" 
    onmouseover="this.src='img/brands/image2.svg';" 
    onmouseout="this.src='img/brands-grey/image2.svg';"/>` 

Но я предпочел бы удалить/вставить "-grey" OnMouseOver/из ЦСИ. Может ли кто-нибудь указать мне, как это сделать?

Заранее благодарен!

Answer 1

Вы кладете JQuery в качестве тега, так вот это решение JQuery:

$(document).ready(function(){ 
    $('img.brand').mouseenter(function(){ 
     $(this).attr('src', $(this).attr('src').replace('-grey', '')); 
    }).mouseleave(function(){ 
     $(this).attr('src', $(this).attr('src').replace('brands', 'brands-grey')); 
    }); 
}); 

HTML, будет намного чище:

<img class="brand" src="img/brands-grey/image1.svg" /> 
<img class="brand" src="img/brands-grey/image2.svg" /> 

Вместо использования 2 наборов изображений, которые я хотел бы использовать сущее Плагин jQuery как jQuery.BlackAndWhite.

Answer 2

Попробуйте

  <img class="brand" src="img/brands-grey/image1.svg" onmouseover="this.src='img/brands/image1.svg';" onmouseout="this.src='img/brands-grey/image1.svg';"/> 
      <img class="brand" src="img/brands-grey/image2.svg" onmouseover="this.src='img/brands/image2.svg';" onmouseout="this.src='img/brands-grey/image2.svg';"/> 
      <script type="text/javascript" src="jquery.js"></script> 
      <script type="text/javascript"> 
      jQuery(function(){ 
       jQuery('img.brand').hover(function(){ 
        // this function will be called when the mouse in 
        var src= $(this).attr('src'); 
        src.replace('brands-grey', 'brands') ; 
        $(this).attr('src', src); 
       }, 
       function(){ 
        // mouse out handler 
        var src= $(this).attr('src'); 
        src.replace('brands', 'brands-grey'); 
        $(this).attr('src', src); 
       } 
       ) 
      }) 
      </script> 

Пожалуйста, исправьте тот путь, JQuery путь. Здесь мы использовали метод наведения jQuery. И jsut реализует логику добавления/удаления серой части из src, как вы просили.

Answer 3

Вы могли бы просто использовать CSS псевдо-класс :hover и использовать любую оболочку, содержащую два изображения, это будет иметь лучшее поведение во всех случаях:

HTML:

<span class="img-container"> 
    <img class="brand" src="img/brands-grey/image1.svg"/> 
    <img class="brand-over" src="img/brands/image1.svg"/> 
</span> 
<span class="img-container"> 
    <img class="brand" src="img/brands-grey/image2.svg"/> 
    <img class="brand-over" src="img/brands/image2.svg"/> 
</span> 

CSS:

.brand-over { 
    display: none; 
} 

.img-container:hover .brand-over { 
    display: inline; 
} 

.img-container:hover .brand { 
    display: none; 
} 

Теперь, если brands-grey - это просто серое изображение, вам даже не нужны два разных изображения, просто используйте, например, opacity: 0.4; и на изображении на множество непрозрачности до 1. jsFiddle

или с помощью CSS3 фильтра с переходом: jsFiddle