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>
