Link to home
Start Free TrialLog in
Avatar of jdroger2
jdroger2Flag for United States of America

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of asafadis
asafadis
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jdroger2

ASKER

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.