Сейчас выглядит так:
|
Код:
|
<body onLoad = "GetInitSize()">
//тут еще кое-что...
<img src="Wiring/Вентилятор СО.png" border="1" alt="Схема 1" id="pic1" onClick="Resize(this)" onmousewheel="SmoothSize(this); return false"> |
JS выглядит так:
|
Код:
|
var InitHeight = new Array();
var InitWidth = new Array();
function GetInitSize()
{var NewImage = new Image();
var allpic = document.getElementsByTagName("img");
for (var i = 0; i < allpic.length; i++)
{NewImage.src = allpic[i].src;
InitHeight[allpic[i].id] = NewImage.height;
InitWidth[allpic[i].id] = NewImage.width;}
}
function Resize(obj)
{obj.width = InitWidth[obj.id];
obj.height = InitHeight[obj.id];
}
function SmoothSize(obj)
{var WidthDelta;
var HeightDelta;
WidthDelta = event.wheelDelta;
HeightDelta = Math.round(event.wheelDelta*InitHeight[obj.id]/InitWidth[obj.id]);
if ((obj.offsetWidth + WidthDelta) > 5)
{if ((obj.offsetHeight + HeightDelta) > 5)
{obj.height += HeightDelta;
obj.width += WidthDelta;};
}
} |
Колесиком картинка масштабируется, кликом размер восстанавливается до исходного.
Единственно, при уменьшении картинки минимальный размер почему-то другой (точнее пропорции), чем после первого же клика.
Хорошо бы еще, чтобы позиция мышки на рисунке не смещалась при изменении масштаба. А также чтобы была возможность выделения области рисунка для его масштабирования.
Задача - максимально удобный просмотр эл. схем автомобиля.
Толкните в нужном направлении.
