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 ( 
and made some changes to   get what I needed .

I have attached the .html and .js file with necessary comments 
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!!!!

Leave a Reply

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

You are commenting using your 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