Помогите настроить js смена картинки при наведении

Привет.
Как сделать чтоб при наведении загружалась другая картинка с прозрачностью?

Увидел на одном сайте _http://datix.tv/zakrytaya-shkola/4004-13-seriya.html (не реклама, наведите на скрин новости, мне также нужно)

Вот исходники скрин затемняется, но только картинки не прогружается почему то.

JS код


<script type="text/javascript">
$(document).ready(function(){
$('.poster_play').each(function(){
      $(this).animate({opacity:'1.0'},1);
      $(this).mouseover(function(){
          $(this).stop().animate({opacity:'0.3'},600);
      });
      $(this).mouseout(function(){
          $(this).stop().animate({opacity:'1.0'},300);
      });
});
});
</script>

CSS стили

.full_img_poster {
  padding:2px;
  width:200px;
}

.poster {
  border:1px solid #CCC;
  -webkit-box-shadow: 0px 0px 3px #A6A6A6;
    -moz-box-shadow: 0px 0px 3px #A6A6A6;
    box-shadow: 0px 0px 3px #A6A6A6;
  width:204px;
  background:url(../images/playb.png) no-repeat center;
}

сама картинка

<img style="opacity: 1;" class="full_img_poster poster_play" src="http://datix.tv/uploads/1346695985_4744.jpg" alt="серия 13. серия" title="">

Если можете напишите свой код.
Спасибо.

Источник:dle-faq.pro, DLE

Перейти на сайт

Помогите настроить js смена картинки при наведении

Похожие новости