mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

Create demo for creating an overlay

Browse Source
This commit is contained in:
Rick Smith 2015-06-23 16:02:46 -06:00
parent 470afb1b7f
commit cdf1942202
1 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
test/demo/overlay.html Normal file
View File

@ -0,0 +1,41 @@
<html>
<title>OpenSeadragon Overlay Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<style type="text/css">
.openseadragon1 {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="contentDiv" class="openseadragon1"></div>
<div id="annotation-div">
<input type="button" value="Hide Overlay" id="hideOverlay">
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi",
});
viewer.addHandler("open", function(event) {
var elt = document.createElement("div");
elt.style.background = "green";
elt.id = "runtime-overlay";
elt.style.border = "1px solid red";
viewer.addOverlay( elt, new OpenSeadragon.Rect(0.2, 0.2, 0.75, 0.75) );
});
$("#hideOverlay").click(function(){
$("#runtime-overlay").toggle();
});
</script>
</body>
</html>