Skip to content

Instantly share code, notes, and snippets.

@sporkd

sporkd/clickmap.html

Created June 4, 2009 02:16
Show Gist options
  • Save sporkd/123387 to your computer and use it in GitHub Desktop.
Save sporkd/123387 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
clickmap.html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<style type="text/css" media="screen">
#chart { position:relative; width:670px; height:535px; margin:0; padding:0; }
#chart .clickmap { position:absolute; width:670px; height:535px; background:transparent; z-index:1000; }
#chart .swf { position:absolute; width:670px; height:535px; background:#00ffff; }
.clear { clear:both; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".clickmap").click(function(e){
var offsetX = parseInt(e.pageX - $(e.target).offsetParent().position().left);
var offsetY = parseInt(e.pageY - $(e.target).offsetParent().position().top);
alert("got a click x:"+offsetX+" y:"+offsetY);
});
});
</script>
</head>
<body>
<div id="chart">
<div class="clickmap"><!-- Just here to catch events --></div>
<div class="swf">
<!-- Put your SWF here -->
</div>
</div>
<div class="clear"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment