jdroger2
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?
<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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
api: {
onShow: function() {
$('a').lightBox();
}
},
to the qtip function.