Hover with PrettyPhoto/Lightbox effect?

[al-shabah]

I would like to have 4 images on the pageWhen a user rollsover each image i want to black out everything and have a popup window where the user can read some info and click on an image to take them to a different page.I have what i want via prettyphoto but the user needs to click on the image/not just hover over it, \[code\]<table class="gallery clearfix" cellpadding="10" cellspacing="40" border="0"> <tr> <td valign="top" width="200px"> <a href="http://stackoverflow.com/questions/14431586/#info_leadership" rel="prettyPhoto[inline]"><img src="http://stackoverflow.com/images/misc/graphics/leadership_development.jpg" style="border:none" height="300" /></a> </td> <td valign="top" width="200px"> <a href="http://stackoverflow.com/questions/14431586/#info_team_development" rel="prettyPhoto[inline]"><img src="http://stackoverflow.com/images/misc/graphics/team_development.jpg" style="border:none" height="300" /></a> </td> </tr> <tr> <td valign="top"> <a href="http://stackoverflow.com/questions/14431586/#info_strategic_intelligence" rel="prettyPhoto[inline]"><img src="http://stackoverflow.com/images/misc/graphics/strategic_intelligence.jpg" style="border:none" height="300" /></a> </td> <td valign="top"> <a href="http://stackoverflow.com/questions/14431586/#info_emotional_social" rel="prettyPhoto[inline]"><img src="http://stackoverflow.com/images/misc/graphics/emotional_social.jpg" style="border:none" height="300" /></a> </td> </tr> </table> <div id="info_leadership" style="display:none;"> <p class="table"><b>Leadership Development</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> </div> <div id="info_team_development" style="display:none;"> <p class="table"><b>Team Development</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> </div> <div id="info_strategic_intelligence" style="display:none;"> <p class="table"><b>Strategic Intelligence</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> </div> <div id="info_emotional_social" style="display:none;"> <p class="table"><b>Emotional & Social Intelligence</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> </div> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $("area[rel^='prettyPhoto']").prettyPhoto(); $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ theme: 'light_square' }); $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({ hideflash: true }); }); </script> \[/code\]