SharePoint 2010 Map image with hotspots and Jquery Screen Tips from list items

SharePoint 2010 Map image with hotspots and Jquery Screen Tips from list items

SharePoint 2010 Map image with hotspots and Jquery Screen Tips from list items

SharePoint 2010 Map image with hotspots and Jquery Screen Tips from list items

So this all started when I got a request to display an image map, with screen tips on each country showing the country’s name along with a date field, taken from a SharePoint list, since the client needed this date column to be changeable.


At first I tried using Visio as explained in this great post, but the result I got was a static one, and I couldn’t get a dynamic popping screen tip out of it.
A couple of months ago I explained how to create Hotspots using SharePoint designer 2010, so now I thought why not combine these hotspots along with SPservices “GetListItems” function and a Jquery screen tip! So I did and it worked out nicely, and here’s how:

  1. Create a list with 2 columns, the default title column to use for the country\location name and an additional column with the information you want to display next to your location name in the screen tip, for my example I used “Launch Date”.
  2. Add your Image map and add hotspot on it as explained here, but the important part is the screen tips! Use your list titles as your hotspots screen tips, make sure you enter the exact text you have in your title column (this will be used to query your list and get\show the additional column).
  3. Create an empty html page in one of your site’s libraries and Copy my code onto it, the only thing you have to change in the code is the list name and the additional column name to your own, also make sure your SPServices script reference is updated.
  4. Add a hidden content editor on same page where you place your hotspots map, with a content link to your html code file.
  5. That’s all.

{code type=html}

<link rel=”stylesheet” href=”http://jquery.bassistance.de/tooltip/jquery.tooltip.css” />
<script src=”http://jquery.bassistance.de/tooltip/jquery.tooltip.js” type=”text/javascript”></script>
<script src=”http://MySiteCollection/sites/Mysite/SiteAssets/jquery.SPServices-0.7.1a.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

var country;
var Ldate;

$(“area[shape=’circle’]”).each(function() {

country = $(this).attr(“title”);

$().SPServices({
operation: “GetListItems”,
listName: “MapCountries”,
CAMLQuery: “<Query><Where><Eq><FieldRef Name=’Title’/><Value Type=’Text’>” + $(this).attr(“title”) + “</Value></Eq></Where></Query>”,
async: false,
completefunc: function(xData, Status)
{
Ldate = $(xData.responseXML).SPFilterNode(“z:row”).attr(“ows_Launch_x0020_Date”);
Ldate = country + ‘ ‘ + Ldate;
}

});

if (Ldate != null)
{
if (Ldate != ‘undefined’)
{
$(this).attr(‘title’,Ldate);
}
}
});

});

$(function()
{
$(“map > area”).tooltip({ positionLeft: true, showURL: false, });
});
</script>

{/code}

2 thoughts on “SharePoint 2010 Map image with hotspots and Jquery Screen Tips from list items

  1. Hi,

    I don’t understand how the link with the html file code works.
    I want to have tooltips on hotspots but no links.I think it’s not possible…
    What I do
    1) create the sharepoint list with data
    2) add a content editor with image map with hotspots as html source
    3) create a html file containing your code updated (name of my list, file location for jquery and SPServices)
    4) create a hidden content editor with the html file code as content link

    Can you help me?

    Thanks

    • Hi Alex, It’s possible, after you create your hotspots with some random links, export you content editor WP to your computer desktop and open that web part .dwb file using notepad, replace all the links of your hotspots – area tags href attributes – with “#”.
      and import your web part back on your page.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *