asked on

How do I make the alt tag go away with my jQuery plug in with IE 6, 7, and 8 (compatibility view)?

I am having one minor issue with my image map that I have used a jQuery plugin called qTip to create. Whenever I hover on a area in the map they appear fine in FF3.5, Chrome, Safari, and IE8. However when in IE 6,7, and compatibility view in 8 the alt tags want to appear by themselves along with the jQuery qtip. The alt tags contain the content for the qTip plugin for each area on the map. I have tried using:

$(element).qtip().removeAttr('title'); .. as I found in another post on their forum but with title replaced with alt but no dice. I may be placing it in the wrong spot within the script though.

The map can be found at map.waterwaycovenc.com

Thanks in advance,
Chase

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="light/fancybox/jquery.fancybox-1.2.6.js"></script> 
<link rel="stylesheet" href="light/fancybox/jquery.fancybox-1.2.6.css" type="text/css" media="screen">


......... LOTS OF HTML FOR IMAGE MAP

<script type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
    $('area').qtip({
        api: {
            onShow: function() {
                $("a").fancybox(); 
            }
        },
        content: $(this).attr('alt'),
        position: {
            corner: {
            target: 'mouse'            
            },
         adjust: {
            mouse: true,
            screen: true
         }
        },

        // Use the ALT attribute of the area map
        style: {
            name: 'light', 
            border: {width: 0, radius: 4, color:'#464d0b'},
            textAlign: 'center',
            width: 380
        },
        hide: {
            when: 'mouseout',
            fixed: true,
            delay: 500
        }
    });

});
</script>
</div>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>

Open in new window

Tony O'Byrne

Rather than
$(element).qtip().removeAttr('alt');, try
$(element).removeAttr('alt')

Never used qtip before, so if this doesn't work, I have no idea.

HaloWebProjects

or inside the options setting are of your qtip code change this

content: $(this).attr('alt'),

to

content: $(this).attr('rel'),

and instead of alt tag use rel, this will remove the alt tag alltogether and will make qtip use the rel attribute content instead....

jdroger2

ASKER

@HaloWebProjects .. using the 'rel' tag does not render properly. I do not believe rel is capable of taking normal character data and being able to reproduce it.

I am successfully removing the 'alt' tag at this point using the new code shown below ..

However the 'alt' tag does not go away until after the qtip is rendered which really doesn't solve my issues. Is there a way to render all of the qtips and then remove the alt tags before my image map is shown?

$('area').qtip({
        api: {
          onRender: function(){
               this.elements.target.removeAttr('alt');
            },
            onShow: function() {
                $("a").fancybox(); 
            }
        },
        content: $(this).attr('alt'),
        position: {
            corner: {
            target: 'mouse'            
            },
         adjust: {
            mouse: true,
            screen: true
         }
        },
      show: { when: 'click'},
        hide: {
            when: 'mouseout',
            fixed: true,
            delay: 500
        },
        // Use the ALT attribute of the area map
        style: {
            name: 'light', 
            border: {width: 0, radius: 4, color:'#464d0b'},
            textAlign: 'center',
            width: 380
        }
    });

Open in new window

ASKER CERTIFIED SOLUTION

jdroger2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial