').text(title)); $speechBubble.append($('
').text(description)); $speechBubble.css({ 'top': topTarget - 20, 'left': leftTarget, 'display': 'block' }).stop().animate({ opacity: 1 }, 200); } function handleHotSpotMouseout(){ var $speechBubble = $('.speech-bubble'); $speechBubble.stop().animate({ opacity: 0 }, 200, function(){ $speechBubble.hide(); }); } function positionHotSpots() { var windowWidth = $window.width(), windowHeight = $window.height(), windowAspectRatio = windowWidth / windowHeight, $hotSpot = $('.hot-spot'); $hotSpot.each(function(index) { var xPos = hotSpots[index]['x'], yPos = hotSpots[index]['y'], desiredLeft = 0, desiredTop = 0; if (windowAspectRatio > imageAspectRatio) { yPos = (yPos / imageHeight) * 100; xPos = (xPos / imageWidth) * 100; } else { yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100; xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100; } $(this).css({ 'margin-top': yPos + '%', 'margin-left': xPos + '%' }); }); } appendHotSpots(); appendSpeechBubble(); $(window).resize(positionHotSpots); $('.hot-spot').on('mouseover', handleHotSpotMouseover); $('.hot-spot').on('mouseout', handleHotSpotMouseout);