Масштабирование, zoom
 

Для IE есть такой метод как zoom():
http://javascript.gakaa.com/style-zoom.aspx
Он позволяет изменять масштаб элемента, а также элементы-потомки, т.е. входящие в этот элемент.

Существует ли такой метод/функция/плагин в js, или jquery, позволяющий изменять масштаб элемента?

В общем дело в том, что у меня существует скрипт, и он работает только на IE, с использованием метода zoom:

var count = 100;
function izoom(w){
  if (w > 0)
    count += count >= 300 ? 0 : 20;
  else if (w < 0)
    count -= count <= 20 ? 0 : 20;
  else
    count = 100;
  document.getElementById(ImageArea).style.zoom = count + "%";
  return false;
}

скрипт работает при клике на 1 из изображений(увеличить или уменьшить):

<!--Увеличить--><img src="mn.gif" width="25" height="29" border="0" onClick="parent.frames.imageFrame.izoom(1)" alt="Увеличить масштаб" style="vertical-align: top; cursor: pointer" />
<!--Уменьшить--><img src="pl.gif" width="25" height="29" border="0" onClick="parent.frames.imageFrame.izoom(-1)" alt="Уменьшить масштаб" style="vertical-align: top; cursor: pointer" />

в самом документе есть фрейм:

<iframe style="z-index: 3;" src="frame.php" width="768" height="550" id="imageFrame" name="imageFrame" frameborder="0" scrolling="No"></iframe>

код самого фрейма:

<span id="ImageArea" style="position: absolute; left: 0; top: 0; height: 100%; width: 100%;" name="ImageArea">
<div id="1" title="" style="left: 75px; top: 17px; width: 22px; height: 22px; font-size: 20px; line-height: 22px;">1</div>
<div id="2" title="" style="left: 128px; top: 16px; width: 22px; height: 22px; font-size: 20px; line-height: 22px;">2</div>
<div id="3" title="" style="left: 207px; top: 60px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">3</div>
<div id="4" title="" style="left: 246px; top: 80px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">4</div>
<div id="5" title="" style="left: 275px; top: 100px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">5</div>
<div id="6" title="" style="left: 305px; top: 111px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">6</div>
<div id="7" title="" style="left: 462px; top: 200px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">7</div>
<div id="7" title="" style="left: 342px; top: 136px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">7</div>
<div id="8" title="" style="left: 382px; top: 158px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">8</div>
<div id="9" title="" style="left: 521px; top: 235px; width: 20px; height: 20px; font-size: 20px; line-height: 20px;">9</div>
<div id="10" title="" style="left: 551px; top: 257px; width: 25px; height: 20px; font-size: 20px; line-height: 20px;">10</div>
<div id="11" title="" style="left: 593px; top: 282px; width: 25px; height: 20px; font-size: 20px; line-height: 20px;">11</div>
<img src="1.jpg" alt="" name="Image" usemap="#Map" id="Image" style="cursor: move" title="123" onload="this.alt='';init();" border="0" height="812" width="1214">

Возможно, есть какое-либо решения для моего "случая"? Т.е. чтобы работало во всех браузерах?

UPD: Если что-то непонятно - скажите/спросите, наверное, вопрос сложный, но хотелось бы хоть какие-нибудь идеи услышать

DreamTheater,
Там увеличения изображения не происходит. Просто при наведении показывается изображение большего размера (так называемая лупа).

Вот эти ссылки больше подходят:
http://www.jdstiles.com/java/scrollers/scroll_zoom.html
http://www.ajax-zoom.com/index.php?cid=examples

А вот сайты на которых свои собственные реализации:
http://www.asos.com/ASOS/ASOS-Leathe...id=1725386&r=2
http://www.td220.ru/xlebopechki/moulinex/ow-2000/

А по теме, лучше вместо zoom увеличивать ширину и высоту изображения.

youmay,
спасибо за ссылки, сейчас буду смотреть/изучать

было бы хорошо увеличивать изображение по высоте и ширине, но дело в том, что прямо на изображении есть дивы с абсолютным позиционированием в виде цифр, и необходимо, чтобы они увеличивались совместно с изображением

дивы можно сдвигать на то значение, на которое увеличилось изображение.

Как раз на сайте http://www.asos.com/ASOS/ASOS-Leathe...id=1725386&r=2, так и сделано. Только это не совсем очевидно. Там абсолютно позиционирована сама картинка и при увеличении скроллом она сдвигается влево и вверх. Таким образом получается эффект увеличения от точки, как например в google picassa - изображение увеличивается, а точка на которой находится мышка, остается неподвижной.

спасибо большое!
здесь http://www.asos.com поначалу и не заметил что скроллингом происходит зум
буду расчитывать значение на которое необходимо сдвинуть дивы:)

youmay,
а не подскажешь, как сдвигать дивы на то значение, на которое увеличилось изображение?

Плагин zoomscroll
Внутри скрипта есть формула вычисления значений на которые надо сдвигать изображение при его увеличении.