imageLife

ImageLife is Jquery Plugin purpose for interacting image with event mouse move.

Live Demo

https://rockman84.github.io/imageLife/

Usage

HTML:

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="/imagelife.min.js"></script> <img src="image.jpg" id="imagelife" /> 

Javascript:

// set image location var config = {   center   : 'center.jpg',   north    : 'north.jpg',   northeast: 'norteast.jpg',   east     : 'east.jpg',   southeast: 'southeast.jpg',   south    : 'south.jpg',   southwest: 'southwest.jpg',   west     : 'west.jpg',   northwest: 'northwest.jpg',   click    : 'click.jpg' };  // set object var image = imageLife(config).target('#imagelife');  // get mousemove position $(window).mousemove(function(e){   image.start(e); }); 

Option

• center: string - image location for center position
• north: string - image location for north position
• northeast: string - image location for north east position
• east: string - image location for east position
• southeast: string - image location for south east position
• south: string - image location for south position
• southwest: string - image location for south west position
• west: string - image location for west position
• northwest: string - image location for north west position
• click: string - image location for click position
• img_type: string - default file type
• adj_top: number - top adjustment for event position
• adj_right: number - right adjustment for event position
• adj_bottom: number - bottom adjustment for event position
• adj_left: number - left adjustment for event position
• debug_color: string | hex number - color for debug mode

Method

option()

image.option({   center: 'path/center.jpg',   north: 'path/center.jpg',   //.... }); 

• Param Object

getDirection()

$(window).mousemove(function(e){   image.getDirection(e); }); 

• Param Object (Require) MouseEvent
• Return String | Event

getOffset()

image.getOffset(); 

• Return Object

getDimension()

image.getDimension(); 

• Return Object

debug()

$(window).mousemove(function(e){   image.debug(); }); 

Event

Example:

var a = $('#imagelife').imageLife(); a.on('center',function(){   alert('Hi... Mouse was center'); }); 

Event List:

• change
• center
• north
• northeast
• east
• southeast
• south
• southwest
• west
• northwest
• click

About the Author

Hi my name is Hansen Wong, i'm programming and designer based in Indonesia

I started this project to deepen my understanding of javascript