38 lines
1,001 B
HTML
Executable file
38 lines
1,001 B
HTML
Executable file
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<style>
|
|
#field {
|
|
width: 200px;
|
|
border: 10px groove black;
|
|
background-color: #00FF00;
|
|
position: relative;
|
|
}
|
|
|
|
#ball {
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div id="field">
|
|
<img src="https://en.js.cx/clipart/ball.svg" width="40" height="40" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// ball.offsetWidth=0 before image loaded!
|
|
// to fix: set width
|
|
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px'
|
|
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|