JavaScript приближение\увеличение изображения

[SiNaC0m]

Начал пробывать реализовать это с помощью JS.
Для начало сделал следующее:
анимационное прокручивания большой картинки, тоесть все изображение не выводится на экран, а выводится лишь его часть.. и по нажатию на одну из четырех кнопок(вверх,вниз,влево,впр аво) изображение смещается соответственно нажатой кнопке..

<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 30);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 30);
}
function ScrollUp()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop += 2", 30);
}
function ScrollDown()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop -= 2", 30);
}
</script>

<div id="PANORAMA" style="width:800px; height:600px; border: 1px solid;
overflow:hidden">
<img src="2.gif" style="width:1000px"/>
</div>

<div style="width:1000px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
<input type="button" value="~" title="Scroll down" style="width:25px"
onmousedown="ScrollUp()"
onmouseup="clearInterval(Timer)">
<input type="button" value="^" title="Scroll up" style="width:25px"
onmousedown="ScrollDown()"
onmouseup="clearInterval(Timer)">
</div>


Теперь мне нужно сделать следующее:
Создать ещё две кнопки "+" и "-", при нажатии на которые, та часть изображения, которая в данный момент на экране, соотвественно увеличивалась и уменьшалась.

Подскажите, какие свойства нужно использовать....
нужно написать две функции, которые меняют кол-во выводимых пикселей в этой строчке

<img src="2.gif" style="width:1000px"/>


Знающие люди помогите плиз....

[blaga]

загружай их в 50% масштабе, а при нажатии на кнопку изменяй масштаб... но тогда физическое разрешение картинки будет как 100%.

[gemaglabin]

Я так понял тебе надо чтото вроде этого


<script>
function resize(id,width)
{
document.getElementById(id).style.width=width;
}
</script>
<img src='1.jpg' onclick="resize(this.id,500);" id='img1'/>

[SiNaC0m]

Мне нужна функиция, что бы при каждом нажатии на кнопку, количество пикселей увеличивалось на определенное число...

[Isis]

Вопроос в тему:
Как сделать , чтобы картинка выводилась в 30% уменьшенном формате, а рпи наведении на нее был истинный размер :)

[blaga]

2Isis, практически тоже самое что запостил Гема, только событие с onClick поменять на onMouseOver.

[Isis]

Неее.....мне надо чтобы бы было что-то типа тултипа.....
Сначала картинка должна отображаться в 3 раза меньше истинного размера, а как навел на картинку , она в нормальном размере как в тултипе должна высветиться...

[blaga]

я что то не понимаю что такое тул тип... Всмысле див сверху? Поточнее...

[Abra]

Isis Тоже не понял что тебе надо...
если просто увлечиение/всплываение/появление оригинальной картинки при наведении мышкой на ту же картинку, только меньшего размера, то тут основную идею уже показали. Остальное уже шлифовка.
Можно более наворочено с помощью ajax'a, но смысл и основная идея от этого не сильно поменяются.

[SiNaC0m]

gemaglabin
Твой скрипт мне не совсем подходит, так как с помощью него картинка увеличивается лишь один раз...
Мне же надо, что бы нажатие на кнопку вело к увеличению картинки...При том нажимать можно несколько раз...
Вот...

[SiNaC0m]

Всем спасибо!
Люди помогли...и вот, что у меня получилось!

<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 10);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 10);
}
function ScrollUp()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop += 2", 10);
}
function ScrollDown()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop -= 2", 10);
}
function Resize()
{
Timer = setInterval("document.getElementById('picture').style.width=par seInt(document.getElementById('picture').style.wid th)-10+'px'", 30);
}
function Resizee()
{
Timer = setInterval("document.getElementById('picture').style.width=par seInt(document.getElementById('picture').style.wid th)+10+'px'", 30);
}
</script>

<div id="PANORAMA" style="width:700px; height:550px; border: 1px solid;
overflow:hidden">
<img id="picture" src="2.gif" style="width:700px"/>
</div>

<div style="width:700px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
<input type="button" value="\/" title="Scroll down" style="width:25px"
onmousedown="ScrollUp()"
onmouseup="clearInterval(Timer)">
<input type="button" value="/\" title="Scroll up" style="width:25px"
onmousedown="ScrollDown()"
onmouseup="clearInterval(Timer)">
<input type="button" value="-" title="-" style="width:25px"
onmousedown="Resize()"
onmouseup="clearInterval(Timer)">
<input type="button" value="+" title="+" style="width:25px"
onmousedown="Resizee()"
onmouseup="clearInterval(Timer)">
</div>

[Isis]

Тултип - вывод подсказки....
все остальное уже описано прошлым постом

[blaga]

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

[SiNaC0m]

Появился еще один небольшой вопрос: можно ли на изображения поместить некоторое количество объектов(независящих друг от друга, например квадрат и треугольник, тыкаю на квадрат открывается одно меню, на треугольник - другое)?
Где про это можно почитать?

[SiNaC0m]

<html>
<script type="text/javascript">
var Timer;
function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 10);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 10);
}
function ScrollUp()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop += 2", 10);
}
function ScrollDown()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop -= 2", 10);
}
function Resize()
{
Timer = setInterval("document.getElementById('picture').style.width=par seInt(document.getElementById('picture').style.wid th)-10+'px'", 30);
T = setInterval("document.getElementById('p1').style.width=parseInt (document.getElementById('p1').style.width)-10+'px'", 30);
}
function Resizee()
{
Timer = setInterval("document.getElementById('picture').style.width=par seInt(document.getElementById('picture').style.wid th)+10+'px'", 30);
T = setInterval("document.getElementById('p1').style.width=parseInt (document.getElementById('p1').style.width)+10+'px '", 30);
}
</script>
<div id="PANORAMA" style="width:700px; height:550px; border: 1px solid;overflow:hidden">
<img id='p1' src='1.gif' style="position:absolute;left:123px;top:343px">
<img id="picture" src="2.gif" style="width:700px"/>
</div>
<div style="width:700px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
<input type="button" value="\/" title="Scroll down" style="width:25px"
onmousedown="ScrollUp()"
onmouseup="clearInterval(Timer)">
<input type="button" value="/\" title="Scroll up" style="width:25px"
onmousedown="ScrollDown()"
onmouseup="clearInterval(Timer)">
<input type="button" value="-" title="-" style="width:25px"
onmousedown="Resize()"
onmouseup="clearInterval(Timer,T)">
<input type="button" value="+" title="+" style="width:25px"
onmousedown="Resizee()"
onmouseup="clearInterval(Timer,T)">
</div>
</html>
Кто-нибудь, объясните мне пожалуйсто, почему у меня объявленные функции действуют только на id="picture", а на id='p1' не деуствуют!? Где ошибка?

[bopoh13]

тыкаю на квадрат открывается одно меню, на треугольник - другое)?
Где про это можно почитать?см MAP & AREA

[SiNaC0m]

Спасибо за советы! Только вот как мне теперь сделать что бы функции увеличения\уменьшения изображения заработали?
<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 10);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 10);
}
function ScrollUp()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop += 2", 10);
}
function ScrollDown()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop -= 2", 10);
}
function Resize()
{
Timer = setInterval("document.getElementById('karta').style.width=parse Int(document.getElementById('karta').style.width)-10+'px'", 30);
}
function Resizee()
{
Timer = setInterval("document.getElementById('karta').style.width=parse Int(document.getElementById('karta').style.width)+ 10+'px'", 30);
}
</script>
<div id="PANORAMA" style="width:450px; height:340px; border: 1px solid;
overflow:hidden">
<img src="1.gif" usemap="#karta1" id="karta">
<map name="karta1">

<area href="123.html" shape="rect" coords="25,36,114,98">
</map>
</div>

<div style="width:700px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
<input type="button" value="\/" title="Scroll down" style="width:25px"
onmousedown="ScrollUp()"
onmouseup="clearInterval(Timer)">
<input type="button" value="/\" title="Scroll up" style="width:25px"
onmousedown="ScrollDown()"
onmouseup="clearInterval(Timer)">
<input type="button" value="-" title="-" style="width:25px"
onmousedown="Resize()"
onmouseup="clearInterval(Timer)">
<input type="button" value="+" title="+" style="width:25px"
onmousedown="Resizee()"
onmouseup="clearInterval(Timer)">
</div>

[Developer]

ИМХО лучше показывать маленьку картинку, 100x100 или приблизительно такого размера, при наведении на нее или нажатии подружать саму картинку через AJAX и показывать в всплывающем окошке.

[SiNaC0m]

В том то и дело, что мне надо именно так, как описанно в коде... Это что то типа ГуглМэп!