By Anonymous (not verified) on

Hello,

I have created a node (I'm using Mayo theme) with imagemap and qTip (Code below). For some reason I get empty space where the imagemap areas are defined. My node looks like this:

image (with image map) with working qTip
empty space (about the same height as the lines are
text

Can you help me?

<img class="map" src="atrakcji.jpg" style="width: 1000px; height: 522px;"  usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="826,100,796,100,796,73,826,73" href="#" title="Country Club" />
<area shape="poly" coords="792,114,762,114,762,87,792,87" href="#" title="Country Club" />
<area shape="poly" coords="760,114,730,114,730,87,760,87" href="#" title="Marina Diana" />
<area shape="poly" coords="783,142,753,142,753,115,783,115" href="#" title="Mini ZOO Pilawa" />
<area shape="poly" coords="753,147,723,147,723,120,753,120" href="#" title="Port jachtowy Pilawa" />
<area shape="poly" coords="754,175,724,175,724,148,754,148" href="#" title="Restauracja Diana" />
<area shape="poly" coords="786,327,748,327,748,293,786,293" href="#" title="Ranczo Bena" />
<area shape="poly" coords="467,104,429,104,429,70,467,70" href="#" title="Stajnia Klucz" />
<area shape="poly" coords="351,31,313,31,313,-3,351,-3" href="#" title="Ścieżka rowerowa" />
<area shape="poly" coords="338,425,300,425,300,391,338,391" href="#" title="Puszcza Kampinoska" />
<area shape="poly" coords="125,122,87,122,87,88,125,88" href="#" title="Lotnisko w Modlinie" />
</map>
<p>&nbsp;</p>
<p class="rtejustify">
some text... some text... some text... some text...some text... some text... some text... some text... some text...  </p>

<script type="text/javascript">
(function ($) {
$(document).ready(function() 
{
   $('area').each(function()
   {
      $(this).qtip(
      {
     content: {
         text: false,
      },
      position: {
        corner: {
         target: 'rightMiddle',
         tooltip: 'leftMiddle'
        }
      },
      style:{
        width: 120,
        border: {
          width: 1,
          radius: 5
        },
        padding: 2, 
        textAlign: 'center',
        name: 'blue',
        'font-size': 12
      }
   });
});
});
})(jQuery);
</script>
⋅ Categories: Drupal 7.x

Comments

lomo’s picture

lomo commented

To me, it looks like your path is missing. You just have src="atrakcji.jpg". I suspect the image should have some path specified. The reason the "blank space the size of the image" is shown, is that you do have dimensions specified, so the HTML wraps around an empty image. In most browsers, I suspect, you would see a "broken image" icon in the middle of that area.

See you at the Drupalcon!

Anonymous’s picture

Anonymous (not verified) commented

Hi,

thanks for your replay. I'm afraid I wasn't clear enough on what is wrong.
The image (with imagemap and qTip) is working perfectly!
The problem is that below the imagemap there is a lot of free space. To me, it looks like Drupal takes the height of all the code lines that have <area ... /> and instead of displaying them it makes an empty space.

Regards,
bonasera