Господа, собственно хочу сделать зум картинки. В моем случае картинка - это карта, которая не помещается целиком в окне браузера, а в уменьшенном варианте слишком мелка для того чтобы разглядеть нужные детали глазом. Можно конечно было положить картинку в div и задать overflow = scroll. Но ползать по карте полосами прокрутки как-то не красиво. Поэтому я ставлю overflow = hide. И пишу две кнопки - "зум +" и "зум -"
<script type='text/javascript'>
function zoom_in(){
var map = document.getElementById('map')
//для примера просто увеличиваю размеры непропорционально
map.width += 100
map.height +=100
}
function zoom_out(){
var map = document.getElementById('map')
map.width -= 100
map.height -=100
}
</script>
</head>
<body>
<div align="center" id="view_window" style="position:absolute; left:174px; top:54px; width:700px; height:700px; z-index:2; overflow: hidden;">
<img id='map' src="images/small_Boss.JPG" width="146" height="133">
</div>
<input type='button' value='Zoom In' onclick='zoom_in()'/>
<input type='button' value='Zoom Out' onclick='zoom_out()'/>
</body>
</html>
При увеличении, когда картинка становится больше размера div'a, ее края
уходят только за нижнюю и правую границу div'а. А как сделать чтобы картинка увеличивалась равномерно относительно центра и выходила за рамки верхней и левой границы? Хотя при таком зуме я не смогу никогда увидеть те участки которые оказались вне окна div'a...
Тогда единственное, что мне приходит в голову, это создать div на котором отлавливать положение курсора мыши и пропорционально установленному зуму отображать в окно созданное при помощи clip: rect() собственно картинку. Но тогда мне нужно будет перемещать картинку по div'у чтобы в clip область попадал нужный кусок. Что я опять же не знаю как сделать.
Подскажите кто поопытней, наверняка вы уже делали зум?
Может мой подход неверен?
