Skip to content

Instantly share code, notes, and snippets.

@seungjin
Created September 7, 2010 06:30
Show Gist options
  • Save seungjin/567956 to your computer and use it in GitHub Desktop.
Save seungjin/567956 to your computer and use it in GitHub Desktop.
<html>
<head>
<style type="text/css">
#targetimg {
background-image:url('http://c.seungjin.net/picture/7');
width: 800px;
height: 600px;
position: static;
}
.note1 {
border-width: 1px;
border-style: dashed;
border-color: #FFFFFF;
background: #FFFFFF;
opacity: 0.5;
height: 75px;
width: 190px;
position: fixed;
top: 455px;
left: 175px;
text-align: center;
}
</style>
<script type="text/javascript">
var a = function(event) {
var mouseX = Math.round (event.clientX);
var mouseY = Math.round (event.clientY);
//alert(mouseX + " : " + mouseY);
// make a circle
document.body.appendChild(feDiv(mouseX,mouseY));
}
var feDiv = function(x,y)
{
var eDiv=document.createElement("DIV");
eDiv.style.width=100;
eDiv.style.height=100;
eDiv.style.position="fixed";
eDiv.style.backgroundColor="#666000";
eDiv.style.opacity="0.5";
eDiv.style.left=x-50;
eDiv.style.top=y-50;
return eDiv;
}
</script>
</head>
<body>
<div id="targetimg" onclick="a(event)">
<div class="note1" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=0.5;"/>KitKat</div>
<div class="note2" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=0.5;"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment