Форум АНТИЧАТ - JavaScript приближение\увеличение изображения

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - JavaScript приближение\увеличение изображения (https://forum.antichat.xyz/showthread.php?t=35572)

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

Начал пробывать реализовать это с помощью 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"/>

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

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

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

Код:

<script>

        function resize(id,width)

        {

                document.getElementById(id).style.width=width;

        }

</script>

<img src='1.jpg' onclick="resize(this.id,500);" id='img1'/>

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

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

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

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

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

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

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