Threaded Mode | Linear Mode

eliorhaim

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.

***Craig***

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
         }
      });
   });
});

eliorhaim

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
         }
      });
   });
});

***Craig***

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.

eliorhaim

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.

eliorhaim

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

***Craig***

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()

eliorhaim

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

***Craig***

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

JS Code

content: 'test'

eliorhaim

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.

eliorhaim

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.

***Craig***

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.

eliorhaim

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>

***Craig***

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>

eliorhaim

still not working..
Sad

***Craig***

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
   });
});

eliorhaim

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

eliorhaim

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.

***Craig***

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.

***Craig***

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

eliorhaim

still not shown at the page..

eliorhaim

JS error?

***Craig***

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

eliorhaim

AWESOME!

eliorhaim

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)

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	Viewport problem	dynamicmindset	8	1,213	18th February 02:12 Last Post: Craig
	Problems with qTip and imagemap	JavaGuy	2	826	10th February 18:03 Last Post: JavaGuy
	[Solved] Tip Positioning using an Imagemap	Chris Rouxel	0	716	21st September 10:53 Last Post: Chris Rouxel
	I have problem for IE and Chrome .	yourself	0	820	30th July 18:45 Last Post: yourself
	Tooltip position incorrect on imagemap area (only in FF)	ajohnson1	2	1,515	8th September 15:43 Last Post: ajohnson1
	Instant problem	Pseudonaut	1	404	7th September 19:35 Last Post: Pseudonaut
	Problem only in Chrome	Michael Bykov	6	1,978	20th August 15:22 Last Post: yolsgens
	ImageMap with alt	mdeltito	5	1,538	11th August 20:41 Last Post: nataroo37
	Position problem	m2studio	1	430	24th June 15:37 Last Post: Craig
	Input value problem	gostbuster	14	2,081	23rd April 14:36 Last Post: gostbuster