js/j04layer.php
<html>
<head>
<title> <?php echo basename(__file__, '.php'); ?> </title>
<style type="text/css">
#layer {position:absolute; top:12em; left: 12em; width: 340; height:246; border: 1em solid red; padding-left: 2em;
background-image: url("pn.jpg"); background-repeat: no-repeat; background-color: yellow; }
</style>
<script type="text/javascript">
var lft=12, tp=12;
function move(v, h) {
var ly = document.getElementById('layer').style;
console.log('ly=' + ly +' top='+ly.top + ' left=' + ly.left);
lft += h;
tp += v;
ly.left = lft + "em";
ly.top = tp + "em";
}
</script>
</head>
<body>
<h1 >navigate</h1>
<input type="button" value="left" onclick="move(0, -5);" />
<input type="button" value="up" onclick="move(-5, 0);" />
<input type="button" value="down" onclick="move(+5, 0);" />
<input type="button" value="right" onclick="move(0, +5);" />
<div id="layer"> <h3>div id=layer</h3> </div>
<h1>Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
</body>
</html>