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?
Shaun VermaakConnect With a Mentor Technical 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
Dr. KlahnConnect With a Mentor Principal 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 VermaakConnect With a Mentor Technical 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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.
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.