A jQuery plugin to manipulate image sources depending on hovered image position
npm install jquery-watchme
See demo on jsFiddle.
// Image default state
defaultState: 'straight',
// Speed of fade in ms
fadeSpeed: 200,
// Timeout before fade in ms
timeout: 300,
// Image elements
imageSelector: "img",
// Do we want hover to be different image?
hoverImg: false,
// Do we want to add direction classes to images?
addClasses: false,// Add watchMe to div where your images are
$('#watchMe').watchMe();// Add data attributes to every image
<img src="https://placehold.it/150x150&text=look straight" width="150" height="150"
data-watchme-direction-straight="https://placehold.it/150x150&text=look straight"
data-watchme-direction-straighthover="https://placehold.it/150x150&text=look straight hover"
data-watchme-direction-up="https://placehold.it/150x150&text=look up"
data-watchme-direction-upright="https://placehold.it/150x150&text=look upright"
data-watchme-direction-right="https://placehold.it/150x150&text=look right"
data-watchme-direction-downright="https://placehold.it/150x150&text=look downright"
data-watchme-direction-down="https://placehold.it/150x150&text=look down"
data-watchme-direction-downleft="https://placehold.it/150x150&text=look downleft"
data-watchme-direction-left="https://placehold.it/150x150&text=look left"
data-watchme-direction-upleft="https://placehold.it/150x150&text=look upleft"
/>- Straight
data-watchme-direction-[defaultState] - Straight hover
data-watchme-direction-[defaultState]hover(Requires optionhoverImgto be true) - Up
data-watchme-direction-up - Down
data-watchme-direction-down - Left
data-watchme-direction-left - Right
data-watchme-direction-right - Down left
data-watchme-direction-downleft - Down right
data-watchme-direction-downright - Up left
data-watchme-direction-upleft - Up right
data-watchme-direction-upright
Licensed under MIT