title: How to make text box appear when hover over on the image map?
body: <p>I am trying to make a text box appear when hover over hotspot on image map. 
  This is what I did to make text to appear when I hover over. </p>
  
  <pre><code>    &lt;p class="ms-rteFontSize-3"&gt;&lt;map name="FPMap0" id="FPMap0"&gt;
      &lt;area title="Click to view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/&gt;
      &lt;area title="Click to view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/&gt;
      &lt;area title="Click to view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/&gt;
      &lt;area title="Click to view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/&gt;&lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p>But instead of this, I want to make colored, visible text box to appear when I hover over. Is it something CSS is required? I am not familiar with CSS, so not sure what to apply here.</p>
  
  <hr>
  
  <p>So I edited my code to this</p>
  
  <pre><code> &lt;html&gt;
  &lt;head&gt; 
  &lt;script src="/sites/JQueryDemo/JS/jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/sites/JQueryDemo/JS/jquery.SPServices-2013.01.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="//www.outsharked.com/scripts/jquery.imagemapster.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif" 
      style="width:400px;height:240px;" usemap="#predflow-map"&gt;
  &lt;map name="predflow-map"&gt;
      &lt;area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" /&gt;
      &lt;area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" /&gt;
      &lt;area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" /&gt;
      &lt;area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" /&gt;
  &lt;/map&gt;
  
  &lt;div style="width:390px; height: 120px; font-size: 12px; "&gt;
      &lt;div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;"&gt;
          &lt;div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"&gt;&lt;/div&gt;
          &lt;div id="predflow-caption-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var inArea,
      map = $('#predflow'),
      captions = {
          a: ["google"],
          b: ["yahoo"],
          c: ["ask"],
          d: ["naver"]
      },
      single_opts = {
          fillColor: '000000',
          fillOpacity: 0,
          stroke: true,
          strokeColor: 'ff0000',
          strokeWidth: 2
      },
      all_opts = {
          fillColor: 'ffffff',
          fillOpacity: 0.6,
          stroke: true,
          strokeWidth: 2,
          strokeColor: 'ffffff'
      },
      initial_opts = {
          mapKey: 'data-name',
          isSelectable: false,
          onMouseover: function (data) {
              inArea = true;
              $('#predflow-caption-header').text(captions[data.key][0]);
              $('#predflow-caption-text').text(captions[data.key][1]);
              $('#predflow-caption').show();
          },
          onMouseout: function (data) {
              inArea = false;
              $('#predflow-caption').hide();
          }
      };
      opts = $.extend({}, all_opts, initial_opts, single_opts);
  
      map.mapster('unbind')
          .mapster(opts)
          .bind('mouseover', function () {
              if (!inArea) {
                  map.mapster('set_options', all_opts)
                      .mapster('set', true, 'all')
                      .mapster('set_options', single_opts);
              }
          }).bind('mouseout', function () {
              if (!inArea) {
                  map.mapster('set', false, 'all');
              }
          });
          &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Still image map is working fine, but nothing appears when I hover over. I added jQuery plugin to SharePoint, example from <a href="http://www.codeproject.com/Articles/544538/JQuery-with-SharePoint-2010" rel="nofollow">here</a> works fine on SharePoint page.</p>