I have troubles with code which must display the image within a frame 300x300px. Also there must be an ability to zoom in and out image inside the frame by pressing the + and - on the keyboard.
I'm a mac user, so maybe the key codes for + & - is not correct, or I asked the wrong path to the image (it's in the same folder as script file). Please, help and thanks for watching! Maybe there is more elegant method to do this task...
<html>
<head>
<script type="text/javascript">
var speed = 4;
function showImage (src)
{
var div = document.createElement ("div");
with (div.style)
{
width = "300px";
heigth = "300px";
border = "2px solid black";
textAlign = "center";
overflow = "hidden";
}
document.body.appendChild(div);
img = document.createElement ("img");
img.src = src;
img.width = 300;
img.height = 300;
div.appendChild (img);
}
function keyDown (key);
{
var k = 0;
if (key == 107 ) k = speed;
if (key == 109 ) k = -speed;
if (k != 0 )
{
img.width = img.width + k;
img.height = img.height + k;
img.style.margin = ((300 - img.height) / 2).toString() + "px";
}
}
</script>
</head>
<body onkeydown="keyDown (event.keyCode)" onload="showImage ('image.jpg')">
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
