Creating Image Hotspots using jquery and HTML:

Objective :

To create a proof of concept demo app with following features
1)Have multiltiple images  alligned in array format  .The image should be draggable .
2)Each image can have multiple hot-spots  .Each of those hot-spots must be clickable .
3)Clicking the hot-spots should display detail information about the product.

Last month my manager asked me to create  a sample html page  for  demo .
The page would have images  arranged in array (4 by 4  for example) format .
Each image would have hot spots in predefined positions .I did a quick search on Google
to see if i could find anything that I could customize to my need.
There were examples close enough but not quite exactly what i was looking for .
So i took inspiration from a jQuery plugin Mobility map (http://playground.mobily.pl) 
and made some changes to   get what I needed .

I have attached the .html and .js file with necessary comments 
Here
Please download the file and  change the extension  from .doc to .zip and extract 
the sample files .Hope that helps .

As always your questions and comments are always welcome.
Happy Coding!!!!
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s