mlhaufe/click-through.html

## click-through.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Click-Through Circle</title>
        <style type="text/css">
            html, body{
                margin:0;
                padding:0;
            }
            #btnHelp{
                position: absolute;
                top:0;
                right:0;
            }
            #btnTarget{
                position:absolute;
                top:120px;
                left:120px;
            }
            #helpCircle{
                display:none;
                position: absolute;
                border:1px solid red;
                border-radius:50%;
                pointer-events:none;
            }
        </style>
    </head>
    <body>
        <button id="btnTarget">Target Object</button>
        <button id="btnHelp">Help!</button>

        <div id="helpCircle"></div>
        <script type="text/javascript">
            function id(o){ return document.getElementById(o); }

            function encircle(element){
                var s = helpCircle.style;
                s.top = element.offsetTop - element.offsetHeight/4 + 'px';
                s.left = element.offsetLeft - element.offsetWidth/5 + 'px';
                s.width = element.offsetWidth + element.offsetWidth*.4 + 'px';
                s.height = element.offsetHeight + element.offsetHeight*.4 + 'px';
                helpCircle.style.display = 'block';
            };

            var btnHelp = id('btnHelp'),
                btnTarget = id('btnTarget'),
                helpCircle = id('helpCircle');

            btnTarget.onclick = function(e){ alert("You clicked the button!"); };
            btnHelp.onclick = function(e){ encircle(btnTarget);    };
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Click-Through Circle</title>
	<style type="text/css">
	html, body{
	margin:0;
	padding:0;
	}
	#btnHelp{
	position: absolute;
	top:0;
	right:0;
	}
	#btnTarget{
	position:absolute;
	top:120px;
	left:120px;
	}
	#helpCircle{
	display:none;
	position: absolute;
	border:1px solid red;
	border-radius:50%;
	pointer-events:none;
	}
	</style>
	</head>
	<body>
	<button id="btnTarget">Target Object</button>
	<button id="btnHelp">Help!</button>

	<div id="helpCircle"></div>
	<script type="text/javascript">
	function id(o){ return document.getElementById(o); }

	function encircle(element){
	var s = helpCircle.style;
	s.top = element.offsetTop - element.offsetHeight/4 + 'px';
	s.left = element.offsetLeft - element.offsetWidth/5 + 'px';
	s.width = element.offsetWidth + element.offsetWidth*.4 + 'px';
	s.height = element.offsetHeight + element.offsetHeight*.4 + 'px';
	helpCircle.style.display = 'block';
	};

	var btnHelp = id('btnHelp'),
	btnTarget = id('btnTarget'),
	helpCircle = id('helpCircle');

	btnTarget.onclick = function(e){ alert("You clicked the button!"); };
	btnHelp.onclick = function(e){ encircle(btnTarget); };
	</script>
	</body>
	</html>