Для 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: Если что-то непонятно - скажите/спросите, наверное, вопрос сложный, но хотелось бы хоть какие-нибудь идеи услышать