image map not working with ie6

[mcorkum]

Hey There,

Having issues in IE6 using an image map.

The tooltip shows, but the actual "title" box shows as well. The problem seems to correct itself if you hover over, point somewhere else, then hover again.

It happens on your image map demo page as well.

Any ideas?

[Craig]

mcorkum, try manually removing the title attribute from the elements after the qTip call like so:

JS Code

$(element).qtip().removeAttr('title');

[fitzu]

I'm also having a problem with ie6 and ie7 in an imagemap, my tootips just dont appear.

This is my code:

JS Code

// Create the tooltips only when document ready
$(document).ready(function()
{
 
var contents = [
   'content.php?contentid=67',
   'content.php?contentid=63',
   'content.php?contentid=62',
   'content.php?contentid=64',
   'content.php?contentid=65',
   'content.php?contentid=66',
   'content.php?contentid=68'
];
 
 
   // Use the each() method to gain access to each elements attributes
   $('area').each(function(i)
   {
      $(this).qtip(
      {
         content: {
            url: contents<span style="font-style: italic;">, // Use the ALT attribute of the area map
      },
 
effect: {
   type: 'fade',      // Determines the type of animation that occurs on position adjustment (slide/fade/none)
   duration: 120,      // Determines the duration of the above effect
   threshold: 1      // If update of the tooltip position requires a movement along either axis [i]greater than</span> this value, no animation occurs.
},
 
   style: { 
      width: 346,
      padding: 20,
      border: {
         width: 3,
         radius: 3,
         color: '#000'
      },
      name: 'light' // Inherit from preset style
   },
   position: {
      corner: {
         target: 'leftMiddle',
         tooltip: 'rightMiddle'
      }
   }
      });
   });
});

[Craig]

fitzu, make sure to check for leading commas in your code before trying to test it out in IE, as it will send out an error and halt the script if you ahve any.

Here's the correct code:

JS Code

// Create the tooltips only when document ready
$(document).ready(function()
{
 
var contents = [
   'content.php?contentid=67',
   'content.php?contentid=63',
   'content.php?contentid=62',
   'content.php?contentid=64',
   'content.php?contentid=65',
   'content.php?contentid=66',
   'content.php?contentid=68'
];
 
 
   // Use the each() method to gain access to each elements attributes
   $('area').each(function(i)
   {
      $(this).qtip(
      {
         content: {
            url: contents<span style="font-style: italic;"> // Use the ALT attribute of the area map
      },
 
effect: {
   type: 'fade',      // Determines the type of animation that occurs on position adjustment (slide/fade/none)
   duration: 120,      // Determines the duration of the above effect
   threshold: 1      // If update of the tooltip position requires a movement along either axis [i]greater than</span> this value, no animation occurs.
},
 
   style: { 
      width: 346,
      padding: 20,
      border: {
         width: 3,
         radius: 3,
         color: '#000'
      },
      name: 'light' // Inherit from preset style
   },
   position: {
      corner: {
         target: 'leftMiddle',
         tooltip: 'rightMiddle'
      }
   }

});
});
});

[fitzu]

Many thanks Craig, that fixed my problem.