• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 450
  • Last Modified:

How do I make a jQuery plugin access the links I have setup inside alt tags of an image map?

I am looking to use a lightbox jquery plug-in to display images that are linked within a jquery tool tip plug-in.  Here's how I currently have it setup.  I have an image map that contains HTML content within the alt tags for each region on the image map.  

<area shape="rect" coords="105,312,151,412" href="#"
alt="<a href='something.jpg'> Some Text </a>" />

Within the HTML of those alt tags I have links that I would like to pop up in a lightbox.  The alt tags are called by the jquery tooltip plugin as part of their content.  This part works great.  However, simply by using

$(function() {
        $('a').lightBox();
    });

It is not properly accessing all links in the document.  Only those outside of the image map.

map.waterwaycovenc.com is the site. You can see the links at the bottom open the lightbox but those in the tooltip of Lot 1 do not.  

 Is this even possible?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="/jqlb/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="/jqlb/css/jquery.lightbox-0.5.css" media="screen" />

<title>Interactive Map | Waterway Cove - Ocean Isle, NC</title>
<style type="text/css">
<!--
.mapstyle{
	font-family: Garamond;  
	margin : 2px 0 0 0;
}
.houses {
	text-align: left;
	list-style-image:url(images/houseicon.jpg);
	font-family: Garamond;
	font-size: 18px;
}
.moreinfo {
	font-size:11px;
	margin: 1px 0 0 0;
}
	
-->
</style>
    <script type="text/javascript">
    $(function() {
        $('a').lightBox();
    });
    </script>
</head>


<body>
<div id="container">
<img src="images/PhaseIA.jpg" width="800" height="750" border="0" usemap="#Map" />
<map name="Map" id="Map">

<area shape="rect" coords="54,292,101,411" href="#" 
alt="<p class='mapstyle'>
<strong>Lot 1 - Housing Options</strong>
<p class='moreinfo'>Click a housing plan for more information</p>
<ul class='houses'>
<li><a href='images/theregency.jpg'>The Regency - 4BR 3.5BA - 2124sf - $343,900</a></li>
<li><a href='images/theregency.jpg'> The Craven - 4BR 3.5BA - 2162sf - $347,900</a></li>
</ul>
</p>" 
/>
<area shape="rect" coords="105,312,151,412" href="#" 
alt="Lot 2" />
<area shape="rect" coords="209,311,246,412" href="#" 
alt="Lot 3" />
<area shape="rect" coords="250,312,287,411" href="#" 
alt="Lot 4" />
<area shape="rect" coords="32,465,153,509" href="#" 
alt="Lot 78" />
<area shape="rect" coords="53,512,154,557" href="#" 
alt="Lot 79" />
<area shape="rect" coords="53,562,154,608" href="#"
 alt="Lot 80" />
<area shape="rect" coords="54,613,152,657" href="#" 
alt="Lot 81" />
<area shape="rect" coords="205,563,248,658" href="#" 
alt="Lot 72 " />
<area shape="rect" coords="252,563,287,659" href="#" 
alt="Lot 73" />
<area shape="poly" coords="364,318" href="#" />
<area shape="poly" coords="294,567" href="#" />
<area shape="poly" coords="294,564,328,560,348,654,291,651" href="#" 
alt="Lot 74" />
<area shape="poly" coords="336,559,360,651,417,595,349,542,360,529" href="#" 
alt="Lot 75" />
<area shape="poly" coords="427,584,358,532,375,505,445,561" href="#" 
alt="Lot 76" />
<area shape="poly" coords="382,494,403,469,478,522,453,556,382,493" href="#" 
alt="Lot 77" />
<area shape="poly" coords="438,439,643,207,712,219,705,434,612,567,555,518" href="#" 
alt="Clubhouse" />
<area shape="poly" coords="629,619,716,688,741,657,650,589" href="#" 
alt="Lot 58" />
<area shape="poly" coords="677,558,656,587,740,652,763,625" href="#" 
alt="Lot 57" />
<area shape="poly" coords="679,555,701,528,785,593,765,620" href="#" 
alt="Lot 56" />
<area shape="poly" coords="706,524,725,497,798,555,781,582" href="#" 
alt="Lot 55" />
<area shape="poly" coords="196,455,198,551,327,550,398,460" href="#" 
alt="Park" />
<area shape="poly" coords="291,313,290,409,338,409,325,312" href="#" 
alt="Lot 5" />
<area shape="poly" coords="349,408,331,311,349,302,416,368,389,402" href="#" 
alt="Lot 6" />
<area shape="poly" coords="359,295,375,269,448,328,427,363" href="#" 
alt="Lot 7" />
<area shape="poly" coords="456,321,380,263,399,235,475,295" href="#" 
alt="Lot 8" />
<area shape="poly" coords="403,231,424,202,502,263,480,289" href="#" 
alt="Lot 9" />
<area shape="poly" coords="428,199,448,172,525,231,502,256" href="#" 
alt="Lot 10" />
<area shape="poly" coords="453,167,472,141,551,200,528,226" href="#" 
alt="Lot 11" />
<area shape="poly" coords="477,135,522,76,578,176,554,194" href="#" 
alt="Lot 12" />
<area shape="poly" coords="528,69,585,170,613,161,590,63,547,59" href="#" 
alt="Lot 13" />
<area shape="poly" coords="602,61,620,157,648,158,652,64" href="#" 
alt="Lot 14" />
<area shape="poly" coords="660,156,662,65,705,64,701,160" href="#" 
alt="Lot 15" />
</map>
<p class='mapstyle'>
<strong>Lot 1 - Housing Options</strong>
<p class='moreinfo'>Click a housing plan for more information</p>
<ul class='houses'>
<li><a href='images/theregency.jpg'>The Regency - 4BR 3.5BA - 2124sf - $343,900</a></li>
<li><a href='images/theregency.jpg'> The Craven - 4BR 3.5BA - 2162sf - $347,900</a></li>
</ul>
</p>
<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').each(function()
   {
      $(this).qtip(
      {
        
		 content: $(this).attr('alt'),
		  position: {
      			corner: {
				 target: 'topRight',
				 tooltip: 'bottomLeft'
						 }
		  			},

		  // Use the ALT attribute of the area map
         style: {
            		name: 'light', 
           			border: {width: 0, radius: 4, color:'#464d0b'},
					textAlign: 'center',
					width: 400
		 		},
		hide: { when: 'mouseout', fixed: true, delay: 1000},
	  });
   });
});
</script>
</div>
<script type="text/javascript" src="/js/jquery.qtip-1.0.0-rc3.min.js"></script>
</body>
</html>

Open in new window

0
jdroger2
Asked:
jdroger2
  • 2
2 Solutions
 
asafadisCommented:
This worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://map.waterwaycovenc.com/" />
<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="/jqlb/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="/jqlb/css/jquery.lightbox-0.5.css" media="screen" />

<title>Interactive Map | Waterway Cove - Ocean Isle, NC</title>
<style type="text/css">
<!--
.mapstyle{
	font-family: Garamond;  
	margin : 2px 0 0 0;
}
.houses {
	text-align: left;
	list-style-image:url(images/houseicon.jpg);
	font-family: Garamond;
	font-size: 18px;
}
.moreinfo {
	font-size:11px;
	margin: 1px 0 0 0;
}
	
-->
</style>
    <script type="text/javascript">
    $(document).ready(function() {
        $('a').lightBox();
    });
    </script>

</head>


<body>
<div id="container">
<img src="images/PhaseIA.jpg" width="800" height="750" border="0" usemap="#Map" />
<map name="Map" id="Map">

<area shape="rect" coords="54,292,101,411" href="#" 
alt="<p class='mapstyle'>
<strong>Lot 1 - Housing Options</strong>
<p class='moreinfo'>Click a housing plan for more information</p>
<ul class='houses'>
<li><a href='images/theregency.jpg'>The Regency - 4BR 3.5BA - 2124sf - $343,900</a></li>
<li><a href='images/theregency.jpg'> The Craven - 4BR 3.5BA - 2162sf - $347,900</a></li>
</ul>
</p>" 
/>
<area shape="rect" coords="105,312,151,412" href="#" 
alt="Lot 2" />
<area shape="rect" coords="209,311,246,412" href="#" 
alt="Lot 3" />
<area shape="rect" coords="250,312,287,411" href="#" 
alt="Lot 4" />
<area shape="rect" coords="32,465,153,509" href="#" 
alt="Lot 78" />
<area shape="rect" coords="53,512,154,557" href="#" 
alt="Lot 79" />
<area shape="rect" coords="53,562,154,608" href="#"
 alt="Lot 80" />
<area shape="rect" coords="54,613,152,657" href="#" 
alt="Lot 81" />
<area shape="rect" coords="205,563,248,658" href="#" 
alt="Lot 72 " />

<area shape="rect" coords="252,563,287,659" href="#" 
alt="Lot 73" />
<area shape="poly" coords="364,318" href="#" />
<area shape="poly" coords="294,567" href="#" />
<area shape="poly" coords="294,564,328,560,348,654,291,651" href="#" 
alt="Lot 74" />
<area shape="poly" coords="336,559,360,651,417,595,349,542,360,529" href="#" 
alt="Lot 75" />
<area shape="poly" coords="427,584,358,532,375,505,445,561" href="#" 
alt="Lot 76" />
<area shape="poly" coords="382,494,403,469,478,522,453,556,382,493" href="#" 
alt="Lot 77" />
<area shape="poly" coords="438,439,643,207,712,219,705,434,612,567,555,518" href="#" 
alt="Clubhouse" />
<area shape="poly" coords="629,619,716,688,741,657,650,589" href="#" 
alt="Lot 58" />
<area shape="poly" coords="677,558,656,587,740,652,763,625" href="#" 
alt="Lot 57" />
<area shape="poly" coords="679,555,701,528,785,593,765,620" href="#" 
alt="Lot 56" />
<area shape="poly" coords="706,524,725,497,798,555,781,582" href="#" 
alt="Lot 55" />
<area shape="poly" coords="196,455,198,551,327,550,398,460" href="#" 
alt="Park" />
<area shape="poly" coords="291,313,290,409,338,409,325,312" href="#" 
alt="Lot 5" />
<area shape="poly" coords="349,408,331,311,349,302,416,368,389,402" href="#" 
alt="Lot 6" />
<area shape="poly" coords="359,295,375,269,448,328,427,363" href="#" 
alt="Lot 7" />
<area shape="poly" coords="456,321,380,263,399,235,475,295" href="#" 
alt="Lot 8" />

<area shape="poly" coords="403,231,424,202,502,263,480,289" href="#" 
alt="Lot 9" />
<area shape="poly" coords="428,199,448,172,525,231,502,256" href="#" 
alt="Lot 10" />
<area shape="poly" coords="453,167,472,141,551,200,528,226" href="#" 
alt="Lot 11" />
<area shape="poly" coords="477,135,522,76,578,176,554,194" href="#" 
alt="Lot 12" />
<area shape="poly" coords="528,69,585,170,613,161,590,63,547,59" href="#" 
alt="Lot 13" />
<area shape="poly" coords="602,61,620,157,648,158,652,64" href="#" 
alt="Lot 14" />
<area shape="poly" coords="660,156,662,65,705,64,701,160" href="#" 
alt="Lot 15" />
</map>
<p class='mapstyle'>
<strong>Lot 1 - Housing Options</strong>
<p class='moreinfo'>Click a housing plan for more information</p>
<ul class='houses'>
<li><a href='images/theregency.jpg'>The Regency - 4BR 3.5BA - 2124sf - $343,900</a></li>
<li><a href='images/theregency.jpg'> The Craven - 4BR 3.5BA - 2162sf - $347,900</a></li>

</ul>
</p>
<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').lightBox();
            }
        },
        content: $(this).attr('alt'),
        position: {
            corner: {
            target: 'topRight',
            tooltip: 'bottomLeft'
            }
        },

        // Use the ALT attribute of the area map
        style: {
            name: 'light', 
            border: {width: 0, radius: 4, color:'#464d0b'},
            textAlign: 'center',
            width: 400
        },
        hide: {
            when: 'mouseout',
            fixed: true,
            delay: 1000
        }
    });
});
</script>
</div>
<script type="text/javascript" src="/js/jquery.qtip-1.0.0-rc3.min.js"></script>
</body>
</html>

Open in new window

0
 
asafadisCommented:
Also, in your "jquery.lightbox-0.5.css" file, change the z-index in lines 18 and 27 to: 6999 and 7000, respectively.
This will fix the tooltip-over-the-lightbox problem.

One more thing... in the code above, remove line #4: <base href="http://map.waterwaycovenc.com/" />
0
 
jdroger2Author Commented:
Thanks for your help. Works great.  You can also remove the first lightbox call as I have deleted the html below the image map.  In case anyone stumbles across this all that was added was ...

api: {
            onShow: function() {
                $('a').lightBox();
            }
        },

to the qtip function.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now