How to pull data/info from an imagemap and pull it from SharePoint lists?

We would like to create an imagemap (in jQuery can do it), and we want to connect it with SharePoint.
Ok here's the question, is it possible and how (if it is possible) to create something like when a user click on some point from the image it will open the specific details of that point, but no need to show the WHOLE data. It can be done in PHP &/or ASP, but we want to create it in SharePoint 2013, as we have the main site already and we want to do every site in SP2013.

We have info with this column: Pos      Part No.      Description      Qty      Valid Fm      Valid To      Sale Price/Pcs.      Remark
but if the user click on one point on the image, it should only show the specific details or info of it, now how to do it in SharePoint or will it be from the script (HTML or ASPX)?
Stiebel EltronAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dr. KlahnPrincipal Software EngineerCommented:
Would a straight HTML client-side image map do?  They're easy to prepare and use.

<IMG SRC="areamap.gif" WIDTH="592" HEIGHT="488" USEMAP="#areamap" BORDER="0">
<MAP NAME="areamap">
 <AREA SHAPE="RECT" HREF="areanw.html"
  COORDS="0,0, 295,243" ALT="NW quarter map">
 <AREA SHAPE="RECT" HREF="areasw.html"
  COORDS="0,244, 295,487" ALT="SW quarter map">
 <AREA SHAPE="POLY" HREF="areane.html"
  COORDS="296,0, 296,211, 369,211, 369,243, 591,243, 591,0" ALT="NE quarter map">
 <AREA SHAPE="POLY" HREF="arease.html"
  COORDS="591,487, 591,244, 369,244, 369,271, 296,271, 296,487"  ALT="SE quarter map">
 <AREA SHAPE="RECT" HREF="overmap.html"
  COORDS="296,212, 368,270"  ALT="To the city overview map">

Open in new window

Shaun VermaakTechnical Specialist/DeveloperCommented:
You can create image maps (such as the one by Dr. Klahn) online with
and you can make them responsive with the JS library
Stiebel EltronAuthor Commented:
Thank you both for your kind response, and apologize for the misunderstanding here, we're in hurry making this thread that's why we just copy and paste the subject. We already edited the subject and should be: "How to pull data/info from an image-map and pull it from SharePoint lists?" We have excel file that have a column of Pos      Part No.      Description      Qty      Valid Fm      Valid To      Sale Price/Pcs.      Remark
and we would transfer it to SharePoint (SP Lists probably).

Then our question is on how to pull specific data if we'll set the Part No. as our Key to pull, and it will show that specific data / info only...
Then the pulled data/info will be shown below the image with the column Part No.      Description      Qty      Valid Fm      Valid To only.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Shaun VermaakTechnical Specialist/DeveloperCommented:
You can access SharePoint lists using the CSOM for SPS. You can use this data to build your image map
var context = SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle('Sample List');

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Stiebel EltronAuthor Commented:
Hi there Shaun! Thank you for your kind response...
But the problem is, we have no idea and no experience with that kind of scripting (CSOM)...
It's like you're explaining something in English, but we want it in Layman's term...

Because even we access the link that you provide, we couldn't understand, as we have no idea where to start or how to create it...

Thank you and hope to hear again soon...

Shaun VermaakTechnical Specialist/DeveloperCommented:
This expert suggested creating a Gigs project.
I think because it's not a quick task, a gig is suited
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.