locked
How to Get List data into An HTML image Map RRS feed

  • Question

  • Hi,

    I have a SharePoint 2010 Intranet. I have a list of European countries with a 'description' and 'country name' fields. I also have converted an image into an html map with hotspots, for use within a Content Editor WebPart to display an interactive map of Europe. I want to leverage Javascript / JQuery to match the data within that SharePoint list i.e. country and description to the corresponding hotspot representing that country in the html map. I want to display list data in a series of popups when a user hovers over a particular country. So when a user hovers over the UK for example, the data from the list corresponding to the UK i.e. name and description, will be displayed in a javascript pop up which appears when the user hovers over the country.

    The data in the list changes daily so I have to have up to date information in my pop ups, thats why i have used a list.

    Does anyone know how I can acheive this?

    Thanks in advance

    Monday, May 14, 2012 3:56 PM

All replies

  • Hi Zoot,

    The below mentioned code will help you get started.You can add this code to a list (Allitems.aspx) and can understand the functionality.This would work.If this is not sufficent What you can do is give each hospot  an id. Then use jqueru mouseenter funcion which will help you to trigger the event when mouse hovered.When the event is hovered find out which id it was hovered over and use it to pull the data fro the list on the fly by using either sharepoint client object model or Spservices library.while building this html map you have give each hot spot different id  (put a div outside that one and give id ) so that you can detect which one was hovered over and load the curresponding data in the list.

    Before trying all there try the code below(change the jquery reference and if you changed the Dispform.aspx name that too)

    Let me know how it goes.

    <script type="text/javascript">
    //check if jQuery already exists
    if(typeof jQuery=="undefined"){
     //set the path to the jQuery library to use
     var jQPath="Application%20Pages/";
     //add the reference to the page and evaluate
     
     document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
    }
    </script>
    <script type="text/javascript">
    /*
    * jQuery AOP - jQuery plugin to add features of aspect-oriented programming (AOP) to jQuery.
    * http://jquery-aop.googlecode.com/
    *
    * Licensed under the MIT license:
    * http://www.opensource.org/licenses/mit-license.php
    *
    * Version: 1.1
    */
     
    //check if AOP already exists
    if(typeof $.aop=="undefined"){
     (function(){var E=1;var B=2;var G=3;var C=4;var F=true;var A=function(K,L,J){var H=K[L];var I;if(J.type==E){I=function(){var M=H.apply(this,arguments);return J.value.apply(this,[M,L])}}else{if(J.type==B){I=function(){J.value.apply(this,[arguments,L]);return H.apply(this,arguments)}}else{if(J.type==C){I=function(){return J.value.apply(this,arguments)}}else{if(J.type==G){I=function(){var M={object:this,args:arguments};return J.value.apply(M.object,[{arguments:M.args,method:L,proceed:function(){return H.apply(M.object,M.args)}}])}}}}}I.unweave=function(){K[L]=H;pointcut=K=I=H=null};K[L]=I;return I};var D=function(I,H){var K=(typeof (I.target.prototype)!="undefined")?I.target.prototype:I.target;var J=[];if(H.type!=C&&typeof (K[I.method])=="undefined"){for(var L in K){if(K[L]!=null&&K[L] instanceof Function&&L.match(I.method)){J[J.length]=A(K,L,H)}}if(J.length==0){throw"No method: "+I.method}}else{J[0]=A(K,I.method,H)}return F?J:J[0]};jQuery.aop={after:function(I,H){return D(I,{type:E,value:H})},before:function(I,H){return D(I,{type:B,value:H})},around:function(I,H){return D(I,{type:G,value:H})},introduction:function(I,H){return D(I,{type:C,value:H})},setup:function(H){F=H.regexMatch}}})();
    }
    </script>
    <script type="text/javascript">
    /*
     * Copyright (c) 2008 Paul Grenier (endusersharepoint.com)
     * Licensed under the MIT (MIT-LICENSE.txt)
     */
     
    //function to handle error in IE
    function handleError(){
     return true;
    }
    //global variable for the loadTip container
    var loadTip;
    //global variable for AOP after advices
    var advicesAfter=new Array();
    //function to create the loadTip container
    function createLoadTip(){
     var html="<span>click to close </span>"
        +"<img style='vertical-align:text-top;' "
        +"src='/_layouts/images/menudark.gif' alt=''/>";
     //set loadTip
     loadTip=$(document.createElement("div")).attr("id","loadTip")
        .html(html).appendTo("body");
     //create content area
     $(document.createElement("div")).attr("id","tipContent")
        .appendTo("#loadTip");
     //set AOP advice to get data from ExpGroupRenderData
     //arguments(htmlToRender[0], groupName[1], isLoaded[2])
     $.aop.around({target:window,method:"ExpGroupRenderData"},
      function(invocation){
       if (invocation.arguments[2]=="true"){
        var group="#tbod"+invocation.arguments[1]+"_";
        //set groupName data to loadTip
        $.data(loadTip[0],"groupName",group);
       }
       return invocation.proceed();
      }
     );
    }
    //function to bind events to elements
    function loadTipEvent(e,a,delay){
     //add target data to element
     $.data(e,"dispTarget",a);
     //bind mouseenter event
     $(e).mouseenter(function(event){
      //create position variables
      var x = event.pageX+10;
      var winx = $(window).width();
      var y = event.pageY;
      var winy = $(window).height();
      var ly;
      var lx;
      //set loadTip out of window
      //height fix 2009-02-17: pg (1/3)
      loadTip.css({"top":-1000, "left":-1000, "height":""});
      //check to see if this target was already loaded
      if($.data(loadTip[0],"dispTarget")&&$.data(loadTip[0],"dispTarget")==$.data(e,"dispTarget")){
       ly = loadTip.height();
       lx = loadTip.width();
       //if the box would run off the page, adjust position
       if (ly+y > winy) y=y-ly-10;
       if (lx+x > winx) x=x-lx-20;
       //part of height fix for big boxes 2009-02-17: pg (2/3)
       if (y < 0) y=0;
       if (ly > winy) loadTip.css({"overflow-y":"auto","height":winy});
       //show loadTip
       loadTip.css({"top":y, "left":x}).show();
      }else{
       //if a timer was started, stop
       if(loadTip.timer)clearTimeout(loadTip.timer);
       //start the delay timer for a data load
       loadTip.timer = setTimeout(function(){
        //&Force=1 prevents redirection on mysites, other pages ignore
        //load ms-formtable into content area
        $("#tipContent").load(a+"&Force=1 .ms-formtable", function(){
         //after data loads, remove width attributes from tds     
         loadTip.find("td").removeAttr("width");     
         ly = loadTip.height();
         lx = loadTip.width();
         //if the box would run off the page, adjust position
         if (ly+y > winy) y=y-ly-10;
         if (lx+x > winx) x=x-lx-20;
         //part of height fix for big boxes 2009-02-17: pg (3/3)
         if (y < 0) y=0;
         if (ly > winy) loadTip.css({"overflow-y":"auto","height":winy});
         //the following line supports calcHTML columns 2009-03-03: pg (1/2)
         //$("#tipContent td[id='SPFieldCalculated']").each(function(){$(this).html($(this).text())});
         $("#tipContent tr[id='idAttachmentsRow']").each(function(){
         $(this).html($(this).replaceWith(""))
         
         //var inner = this.innerHTML;
         //inner = inner.replace("");
         //this.innerHTML= inner;
         //alert(inner);
         });
         //show loadTip
         loadTip.css({"top":y, "left":x}).show();
         //add target data to loadTip
         $.data(loadTip[0],"dispTarget",a);
        });
       },delay);
      }
     });
     //bind mouseleave event
     $(e).mouseleave(function(event){
      if(loadTip.timer)clearTimeout(loadTip.timer);
     });
     //set loadTip to close when clicked
     loadTip.click(function(){
      loadTip.hide();
     });
    }
    //function to find elements
    function initLoadTip(keyword,group,delay){
     //if the loadTip box does not exist, create it
     if(typeof loadTip=="undefined")createLoadTip();
     //use the main content zone as default
     if(!group)group="#MSO_ContentTable";
     //set a default delay for data loads
     if(!delay)delay=500;
     //if no keyword, find links to documents
     //requires change of view on some OOB web parts
     if(!keyword)keyword="initDocs";
     //for documents...
     if(keyword=="initDocs"){
      //find tables with dref and no inner links pointing to the DispForm
      //this prevents double binding
      var arrayList=$(group+" table[dref]:not(:has(a[href*='DispForm']))");
      $.each(arrayList,function(i,e){
       //build a link to the DispForm
       var a="/"+escapeProperly($(e).attr("dref"))
         +"/Forms/DispForm.aspx?ID="
         +$(e).attr("id");
       //find the link to the document
       var e=$(e).find("a");
       //if this link has no dispTarget data
       //prevents multiple bindings
       if (!($.data(e,"dispTarget"))){
        //bind events
        loadTipEvent(e,a,delay);
       }
      });
     }else{
      //find elements matching keyword in the link
      var arrayList=$(group+" a[href*='"+keyword+"']");
      $.each(arrayList,function(i,e){
       //remove any bookmarks from the link
       var a=$(e).attr("href").split("#")[0];
       //if this link has no dispTarget data
       //prevents multiple bindings
       if(!($.data(e,"dispTarget"))){
        //bind events
        loadTipEvent(e,a,delay);
       }
      });
     }
     //check the advices array to see if an advice was loaded for that keyword
     if ($.inArray(keyword,advicesAfter)==-1){
      //add the keyword to the advices array
      advicesAfter.push(keyword);
      //create an advice after ExpGroupRenderData
      $.aop.after({target:window,method:"ExpGroupRenderData"},
        function(){
       //get the groupName data from loadTip
       var group=$.data(loadTip[0],"groupName");
       //if loadTip has groupName data, reinitialize elements for that keyword
       //after ExpGroupRenderData renders new html
       //loaded by expanding a group
       if(group)initLoadTip(keyword,group,delay);
        }
      );
     }
    }
    $(function(){
     //handle the first error in IE
     window.onerror=handleError;
     //example of loadTip with links to DispForm,aspx (the keyword)
     //using the default content zone with 1 second delay
     initLoadTip("DispForm.aspx","",100);
     //example of loadTip with userdisp (the keyword)
     ////using the default content zone and default .5 second delay
     initLoadTip("userdisp");
     //example of loadTip for documents using defaults
     initLoadTip();
    });
    </script>
    <!-- loadTip CSS -->
    <style type="text/css">
    #loadTip
    {
     background: #000000;
     color: #fff;
     border: 2px solid ##993300;
     font-size: 10px;
     padding: 3px;
     width: 342px;
     display: none;
     text-align: right;
            position: absolute;
     
    }
    #tipContent {
     background: #FFFFFF;
     padding: 3px;
    color:#FFFFFF;
    }
    </style>

    Thursday, May 17, 2012 5:12 AM
  • Thank you very much for this, i will give it a go and let you know how it goes.

    Tenille

    Thursday, May 17, 2012 11:27 AM
  • Hi Balu,

    I have looked at this code and tried to understand it. I am new to Javascript so my understanding is minimal. This code will create the pop up. What I think i need is some javascript to loop through the elements of the countries list and connect the data to the image map html. Is this correct?Thanks in advance.

    Thursday, May 17, 2012 11:51 AM
  • Hi Zoot,

    When you hover over an item it will create an popup. Before directly putting in page of you html map, try putting over an AllItems.aspx and tweak the code a little so it works over the map.This code willl read from the list and display just as display form, one you get the output can change the look and feel.

    Friday, May 18, 2012 3:57 AM
  • Hi Balu,

    i'm not sure what you mean, 'putting it over an AllItems.aspx'. I am not adding this solution to a content editor web part.  Will the pop up display the information in the list when a user hovers over the country it corresponds too? What I need is for the pop up to display information within the list, so if a user hovers over the hotspot for UK for example, the information in the pop up will display information contained in the list corresponding to the UK country name and description in the list. Is this not possible with your code?

    Thanks in advance

    Friday, May 18, 2012 7:56 AM
  • Hi Zoot,

    That is what the code exacly does.What i meant is you are trying to putt information from a list.So before integrating this code to the html map, Add  as cewp to AllItems.aspx of the list so that it will start working and you can understand the functioning of code.Once it starts working change or adjust the mouseover event to make this work with your html maps.

    Monday, May 21, 2012 4:23 AM
  • Hi Zoot,

    Please let me know if it worked.

    Friday, May 25, 2012 9:45 AM
  • Hi,

    I have failed using this solution as I was using a Content Editor Web part to put in my Javascript. I was not using a custom solution with a view to Allitems.aspx. I am however trying  a differen slution:

    http://techtrainingnotes.blogspot.co.uk/2009/07/sharepoint-rotating-pictures-random.html

    Thanks for your help.

    Friday, May 25, 2012 11:33 AM