<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 500px;
}
.box__image {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="http://www.newton.ac.uk/files/covers/968361.jpg"
data-hover-src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"
class="box__image">
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
$('.box__image').mouseover(function() {
var $this = $(this);
if (!$this.data('image_replaced')) {
$this.data('image_replaced', true);
var newSrc = $this.attr('data-hover-src');
$this.attr('src', newSrc);
}
});
});
</script>
</body>
</html>
Простой
