rendered paste body<style>.map { position: relative; _margin-left: -30px;}.popup { background: transparent url( '/theme/admissions/images/hover.png' ) no-repeat; width: 400px; height: 140px; padding: 0px 10px; font-family: Arial, Helvetica San-serif; color: #fff; font-size: 0.8em; margin-left: 295px; position: absolute; display: none; /* keeps the popup hidden if no JS available */}.popup h2{ color: #fff;}</style><script type="text/javascript">$(function () { $('.map').each(function () { // options var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 0); // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; // reset position of popup box popup.css({ top: 0, left: -33, display: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; $('.popup').html( '' ); // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); });});$(document).ready(function() { $('#state_map').hover(function() { switch (this.id) { case 'josiah' : var html= '<h2>Josiah Littrell</h2><p>ext. 2347</p>'; $('.popup').html( html ); break; case 'brandon' : var html= '<h2>Brandon Combs</h2><p>ext. 2347</p>'; $('.popup').html( html ); break; } });});</script><h2>Click on a state to see your counselor</h2><div class="map"><div class="trigger"> <img src="/theme/admissions/images/map.jpg" alt="Counselors by State" width="565" height="464" border="0" alt="" usemap="#state_map"> <map name="state_map"> <area shape="poly" alt="" id="josiah" coords="531,115, 535,119, 538,114, 542,112, 551,132, 555,133, 557,138, 565,139, 565,146, 550,155, 549,155, 548,161, 543,168, 538,174, 539,180, 539,183, 549,185, 553,191, 553,196, 547,197, 547,200, 544,202, 537,210, 524,215, 518,221, 518,230, 518,236, 514,248, 504,240, 505,236, 510,226, 510,225, 504,222, 504,215, 499,205, 455,215, 459,197, 481,181, 490,165, 495,162, 518,155, 523,150, 529,147" href="/admissions/staff/Josiah-Littrell"> <area shape="poly" alt="" id="brandon" coords="122,119, 224,138, 284,142, 304,138, 304,134, 308,142, 322,144, 336,150, 352,149, 349,154, 332,169, 344,163, 344,169, 366,178, 368,176, 374,184, 377,192, 377,213, 375,218, 377,223, 384,236, 389,231, 404,228, 408,228, 413,266, 404,279, 399,279, 395,284, 384,284, 380,291, 377,296, 372,296,369,296, 371,296, 371,301, 365,310, 365,312, 360,304, 313,307, 314,296, 313,300, 232,300, 234,261, 234,248, 215,248, 217,218, 219,192, 154,184, 153,189, 151,187, 144,187, 124,171, 129,157, 121,146, 120,133, 118,131" href="/admissions/staff/Brandon-Combs"> <area shape="poly" alt="" coords="64,389, 73,387, 81,387, 107,400, 118,408, 129,419, 134,425, 117,437, 111,433, 114,413, 108,414, 102,408, 95,408, 81,396, 81,389, 69,398, 63,395" href="/admissions/staff/Krista-Buckel"> <area shape="poly" alt="" coords="76,6, 108,18, 106,78, 126,90, 139,115, 138,119, 133,118, 119,94, 102,81, 81,76, 76,81, 62,94, 55,96, 48,92, 33,99, 21,100, 4,104, 0,98, 5,96, 28,95, 30,92, 44,84, 31,79, 26,67, 28,55, 30,50, 36,46, 43,44, 35,37, 33,27, 36,23, 48,25, 41,13, 51,9, 58,5, 70,0" href="/admissions/staff/Krista-Buckel"> <area shape="poly" alt="" coords="224,401, 235,401, 244,408, 249,419, 249,422, 258,430, 258,437, 264,440, 264,446, 272,446, 275,451, 286,451, 283,437, 287,425, 290,420, 297,417, 315,408, 326,397, 328,398, 341,399, 347,397, 351,399, 360,408, 368,402, 373,400, 377,404, 380,404, 380,400, 373,389, 375,389, 384,385, 384,389, 384,324" href="/admissions/staff/Krista-Buckel"> <area shape="poly" alt="" coords="384,324, 362,326, 362,320, 365,312, 360,312, 360,304, 314,307, 313,300, 232,300, 234,248, 215,248, 219,192, 221,192, 153,185, 153,189, 149,187, 143,187, 134,182, 130,177, 124,171, 129,158, 127,154, 121,146, 120,137, 117,132, 120,120, 112,118, 62,104, 46,106, 43,115, 42,121, 42,138, 49,143, 38,142, 18,187, 17,196, 17,199, 17,207, 14,215, 11,218, 11,240, 21,261, 17,266, 21,272, 21,284, 29,310, 42,316, 48,316, 50,316, 50,326, 57,332, 62,346, 90,346, 87,353, 128,370, 130,370, 129,376, 150,376, 160,376, 160,370, 179,370, 197,389, 198,397, 207,408, 217,408, 221,400" href="/admissions/staff/Krista-Buckel"> <area shape="poly" alt="" coords="384,324, 413,320, 420,353, 425,353, 420,362, 425,370, 395,376, 399,382, 395,387, 395,382, 388,389" href="/admissions/staff/Krista-Buckel"> <area shape="poly" alt="" coords="453,248, 445,261, 436,272, 445,283, 451,284, 455,279, 466,261, 471,261, 475,248, 466,248" href="/admissions/staff/Bradley-Camilleri"> <area shape="poly" alt="" coords="451,292, 430,296, 441,288, 441,279, 445,283, 451,284, 455,279, 466,261, 470,261, 475,261, 475,248, 505,265, 505,273, 510,279" href="/admissions/staff/Bradley-Camilleri"> <area shape="poly" alt="" coords="466,246, 503,236, 503,242, 507,254, 513,253, 514,257, 509,261, 507,261" href="/admissions/staff/Bradley-Camilleri"> <area shape="poly" alt="" coords="453,291, 445,298, 430,310, 426,316, 425,316, 441,316, 441,322, 453,335, 463,346, 470,353, 470,346, 486,336, 489,322, 495,321, 500,316, 513,304, 512,297, 518,289, 518,287, 508,288, 511,279" href="/admissions/staff/Bradley-Camilleri"> <area shape="poly" alt="" coords="413,320, 440,316, 437,322, 453,336, 470,354, 466,370, 459,370, 457,370, 429,376, 425,370, 423,361, 425,354, 420,349" href="/admissions/staff/Bradley-Camilleri"> <area shape="poly" alt="" coords="395,376, 426,372, 428,377, 460,374, 461,370, 466,371, 484,401, 495,432, 492,438, 491,446, 488,445, 483,444, 478,437, 475,437, 466,424, 463,424, 458,416, 460,408, 456,409, 454,396, 448,394, 441,383, 437,383, 433,389, 429,389, 427,389" href="/admissions/staff/Bradley-Camilleri"> </map></p> <div class="popup"> <p>This is some popup info.</p> </div></div></div>