craigsworks.com - Support Forum - ImageMap problem

Pages: 1 2

Hi Everyone,
I tried to put the qtip on my new website at my ImageMap and it does'n work.. Sad

this is the link to my site:
http://www.travel-israel.co.il/site/index.php
Thanks,
Elior Haim.

P.s
sorry for my bad english.

Hi eliorhaim,

Image map functionality went live with the Beta 4 Release so try updating to the newest library. If you've already done so, take a look at the code in the imagemap demo:

http://craigsworks.com/projects/qtip/dem...n/imagemap

JS Code

// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('area').each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr('alt'), // Use the ALT attribute of the area map
         style: {
            name: 'dark', // Give it the preset dark style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         }
      });
   });
});

Tanks Craig,
I alredy use the Beta 4. and I did the same thing like at the demo.
its still not work.. Sad

craig Wrote:Hi eliorhaim,

Image map functionality went live with the Beta 4 Release so try updating to the newest library. If you've already done so, take a look at the code in the imagemap demo:

http://craigsworks.com/projects/qtip/dem...n/imagemap

JS Code

// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('area').each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr('alt'), // Use the ALT attribute of the area map
         style: {
            name: 'dark', // Give it the preset dark style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         }
      });
   });
});

Could you give a bit more detail about what's not working? What kind of errors are you receiving? Could you post screenshots indicating what's happening? Any more information would be helpful.

It's not working I dont know what to describe.. my english is bad, visit the link and see whats happend.
I will try to put here some screenshots.

craig Wrote:Could you give a bit more detail about what's not working? What kind of errors are you receiving? Could you post screenshots indicating what's happening? Any more information would be helpful.

http://www.travel-israel.co.il/site/qtip.jpg
screenshot

Found your problem!

You need to apply the tooltips to the area elements, not the map itself. Change you selector from this:

JS Code

$("#ImageMap").each(function()

To this:

JS Code

$("#ImageMap area").each(function()

still not working.. :\
what I did wrong?
I know javascript and also ajax.. dont know why its doesn't work.
Thanks Craig..

Hmm what happens when you replace the content with a simple text like this:

JS Code

content: 'test'

Its show the text but only if I change it back to "#ImageMap" from "#ImageMap area" and its working not near to the mouse crusir.

I was thinking that its doesnt work cause the Direction of the page at RIGHT TO LEFT
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="rtl">
(not english site of dir="ltr")
but its not the bag.. its fix how the tip box looks like.

my problems is that:
1. the content of the "alt" not show at the tips.
2. the tips appears not near to the mouse crusir.

I think I've found the problem. At the moment the area map functionality only matches against lowercase area types like 'poly' and 'circle' but not uppercase ones like yours 'POLY'. Try changing them to lowercase and I'll add in uppercase detection to the next RC.

Its not that cause I have also poly where the red dots at the map and also circles.
see my ImageMap code..

JS Code

<area shape="CIRCLE" href="#kazerin" alt="?????" target="" coords="200,52,6"></area>
<area shape="RECT" href="#kazerin" alt="?????" target="" coords="191,58,215,69"></area>
<area shape="POLY" href="#agolan" alt="?????" target="" coords="188,5,189,27,187,40,193,47,189,65,190,78,185,97,194,96,199,88,206,84,213,76,216,59,221,59,221,52,218,42,216,35,212,30,215,20,212,12,207,4,207,0,199,0"></area>

Not sure I follow... the problem is not the types present, its that your text is in UPPERCASE not lowercase. Change this:

JS Code

<area shape="CIRCLE" href="#kazerin" alt="?????" target="" coords="200,52,6"></area>
<area shape="RECT" href="#kazerin" alt="?????" target="" coords="191,58,215,69"></area>
<area shape="POLY" href="#agolan" alt="?????" target="" coords="188,5,189,27,187,40,193,47,189,65,190,78,185,97,194,96,199,88,206,84,213,76,216,59,221,59,221,52,218,42,216,35,212,30,215,20,212,12,207,4,207,0,199,0"></area>

to this:

JS Code

<area shape="circle" href="#kazerin" alt="?????" target="" coords="200,52,6"></area>
<area shape="rect" href="#kazerin" alt="?????" target="" coords="191,58,215,69"></area>
<area shape="poly" href="#agolan" alt="?????" target="" coords="188,5,189,27,187,40,193,47,189,65,190,78,185,97,194,96,199,88,206,84,213,76,216,59,221,59,221,52,218,42,216,35,212,30,215,20,212,12,207,4,207,0,199,0"></area>

still not working..
Sad

You've not changed the selector in the code. The below code works, but the border issue is caused by your right to left text. This can be fixed by adding a normal dir attribute to the tooltip itself, which is also included in the code. I'll be adding native support for this in the upcoming RC.

JS Code

// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $("#ImageMap area").each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr("alt"), // Use the ALT attribute of the area map
         style: {
            name: "dark", // Give it the preset dark style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         }
      })
 
      // Set the direction to prevent border bugs
      var api = $(this).qtip('api');
      api.elements.tooltip.attr('dir', 'ltr');
      api.elements.contentWrapper.attr('dir', $('html').attr('dir')); // Makes the contents your defined text direction
   });
});

with this thing "#ImageMap area" its not work at all.

The border is nothing. the big problems is that the tip not show near to the mouse crusir and the alt text not show at the content of the tip.

This code definitely works, I've just tested it on your page:

JS Code

// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $("#ImageMap area").each(function()
   {
      $(this).qtip(
      {
         content: {
           text: $(this).attr("alt"), // Use the ALT attribute of the area map
           prerender: true
         },
         style: {
            name: "dark", // Give it the preset dark style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         }
      })
 
      // Set the direction to prevent border bugs
      var api = $(this).qtip('api');
      api.elements.tooltip.attr('dir', 'ltr');
      api.elements.contentWrapper.attr('dir', $('html').attr('dir')); // Makes the contents your defined text direction
   });
});

The positioning is actually an issue with my positioning code. Bare with me while I have a look over it.

Could you please replace this bit of your qTip javascript file:

JS Code

targetPos.left+=coords[2]+2;targetPos.top+=coords[2]+2;

with this:

JS Code

targetPos.left+=coords[2];targetPos.top+=coords[2];

This should fix the problem with positioning hopefully

still not shown at the page..

JS error?

Your code on the page is not correctly formatted:

JS Code

var api = $(this).qtip(\'api\');
      api.elements.tooltip.attr(\'dir\', \'ltr\');
      api.elements.contentWrapper.attr(\'dir\', $(\'html\').attr(\'dir\')); // Makes the contents your defined text direction

Should read:

JS Code

var api = $(this).qtip('api');
      api.elements.tooltip.attr('dir', 'ltr');
      api.elements.contentWrapper.attr('dir', $('html').attr('dir')); // Makes the contents your defined text direction

AWESOME!

but why its still not every tip box near to the mouse pointer?
(also its working perfect at FF but not at IE 7.. - at IE7 there is an js error)

Pages: 1 2