Изменение изображения на mousemove в javascript

Question

Я наткнулся на сайт this и хотел реализовать что-то похожее на свой логотип смены картинки, пока мышь перемещается на мой собственный сайт. Я не уверен, что он использует jQuery, поскольку источник страницы немного запутанный, есть ли в любом случае для меня это в javascript?

Answer 1

Вы также можете выполнить тот же эффект, используя css, если у вас есть div или какой-либо другой элемент блока вместо тега изображения.

#logo { 
background: url('logo.png'); 
width: 200px; 
height: 45px; 
} 

#logo:hover { 
background: url('logo_hover.png'); 
} 

Answer 2

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

Это спрайт изображение для логотипа: http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png

Вы должны сделать некоторую математику на основе макета спрайтов и как «быстро» вы хотите изменить изображение.

Смотрите это, http://docs.jquery.com/Tutorials:Mouse_Position

А затем изменить положение фона элемента.