Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Увеличение\Приближение изображения


Автор: SiNaC0m 15.3.2007, 10:25
Начал пробывать реализовать с помощью 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>


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

Подскажите, какие свойства нужно использовать.... 

З.Ы. Извиняюсь за опечатки и корявость мысли!

Автор: SiNaC0m 15.3.2007, 13:03
Понял, что мне нужно написать две функции, которые меняют кол-во выводимых пикселей в этой строчке
Код
<img src="2.gif" style="width:1000px"/> 


что то типа .....width:1000+\-=2

Только вот как это реализовать???? Знающие люди помогите плиз....

Автор: 12345c 15.3.2007, 14:13
Красивее это делать не в окне, а в слое, тогда не надо фрейм делать. И реализовывать размещением абсолютнопозиц. картинки в диве с overflow:hidden. Далее чисто математика (арифметика) - где поставить угол картинки, чтобы показать часть. Свойства - .style.top, style.left, style.width (последнее для масштабирования). В конце после числа обязательно 'px'.

Автор: SiNaC0m 15.3.2007, 14:19
В том то и дело, что мне это надо сделать именно в окне smile 
А как мне "обратиться" к элементу, если он представлен как сылка на изображение?
Код

Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 30);

ID ведь уже не прокатит????

Автор: butionok 15.3.2007, 14:33
Измени

Код

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


далее для уменьшения:

Код

document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)/n+"px"; //для уменьшение в n раз
document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)-n+"px"; //для уменьшение на n пикселей


для увеличения сообрази сам smile

Автор: SiNaC0m 15.3.2007, 15:12
Подскажите, где я туплю!!!!
Код

......................
......................
function resize()
{
Timer = setInterval("document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)-100+"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="re size" style="width:25px"
onmousedown="resize()"
onmouseup="clearInterval(Timer)">
</div>

Автор: Mymik 15.3.2007, 15:43
Цитата(SiNaC0m @  15.3.2007,  15:12 Найти цитируемый пост)
Timer = setInterval("document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)-100+"px"", 30);


Код

Timer = setInterval("document.getElementById('picture').style.width=parseInt(document.getElementById('picture').style.width)-100+'px'", 30);

Автор: SiNaC0m 15.3.2007, 16:29
Огромное спасибо! Все  работает! smile 

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

Автор: butionok 16.3.2007, 19:12
Можно.
например так:

Код

<div id='d1' style='position:absolute'><img id='p1' src='1.jpg' style='position:absolute;left:0px;top:0px'></div>
<div id='d2' style='position:absolute'><img id='p2' src='2.jpg' style='position:absolute;left:100px;top:100px'></div>

Автор: SiNaC0m 9.4.2007, 11:14
butionok
Столкнулся со следующей проблемой: при использовании твоего кода на изображении с  масштабированием(приближение\удаление), вставляемые объекты не меняют своего местоположение динамически как это исправить?  

Автор: butionok 9.4.2007, 18:54
SiNaC0m, 

Было бы лучше если б ты показал  часть хтмл кода. Вопрос немного не понятен. Я так понимаю ты попытался наложить на изображение другие (квадрат, треугольник.. ) так? И они при увеличении/уменьшении находятся на том же месте относительно слоя "PANORAMA"? Собственно, если б я делал то, что ты делаешь, я бы был бы доволен результатом smile. Или я не понимаю в чём состоит твоя проблема.

Автор: SiNaC0m 9.4.2007, 19:30
butionok
У меня есть изображение, на него я накладываю "квадрат, треугольник и так далее". Проблема в том, что при увеличении - уменьшении этого изображения "квадрат, треугольник и так далее" остаются на том же месте, а не смещаются 
Код

<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=parseInt(document.getElementById('picture').style.width)-10+'px'", 30);
}
function Resizee()
{
Timer = setInterval("document.getElementById('picture').style.width=parseInt(document.getElementById('picture').style.width)+10+'px'", 30);
}
</script>
<div id='d1' style='position:absolute'><img id='p1' src='1.jpg' style='position:absolute;left:0px;top:0px'></div>
<div id='d2' style='position:absolute'><img id='p2' src='2.jpg' style='position:absolute;left:100px;top:100px'></div>
<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>

<script language="JavaScript">

function clock_form()

         {

     day=new Date()

     clock_f=day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()

     document.form.f_clock.value=clock_f

         id=setTimeout("clock_form()",100)

     }

</script>

<body bgcolor="ffffff" onLoad="clock_form()">

<form name=form metod="get">

<input name=f_clock maxlength=8 size=8>
</form>

Автор: butionok 9.4.2007, 19:56
Всё, дошло.

Код

<div id="PANORAMA" style="width:700px; height:550px; border: 1px solid;overflow:hidden">
<img id='p1' src='1.jpg' style='position:absolute;left:0px;top:0px'>
<img id='p2' src='2.jpg' style='position:absolute;left:100px;top:100px'>
<img id="picture" src="2.gif" style="width:700px"/>
</div>


Просто я не ожидал что, ты так буквально будешь следовать примеру.
Собственно слои d1 и d2 не нужны. Просто клади все картинки в один слой. "квадрат, треугольник и так далее" должны быть абсолютно позиционированны. Их положения будут расчитываться от "PANORAMA"

Автор: SiNaC0m 17.4.2007, 10:58
butionok
Ты не совсем правильно меня понял, а точнее, я не совсем правильно выразился.
У меня есть картинка в окне, на которую сверху наносится изображение. Картинку, та, что в окне, можно увеличивать и уменьшать.
Надо сделать так, что бы, при увеличении\уменьшении этой картинки, нанесенное на неё изображение не меняло свое место. Тоесть было прикрепленно к этому изображению. Как "привязать" картинку непосредственно к пикселям изображения. 

Автор: SiNaC0m 23.4.2007, 18:52
Код

<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=parseInt(document.getElementById('picture').style.width)-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=parseInt(document.getElementById('picture').style.width)+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'  не деуствуют!? Где ошибка?  

Автор: SiNaC0m 6.5.2007, 00:48
Решил сделать маленько по-другому, заместо нанесения изображения, я стал использовать разметку этого изображения с помощью тегов map и area. Но, возникла проблема. Теперь вся картинка не масштабируется. Люди, пожалуйсто объясните, в чем заключается моя ошибка. А то какой то замкнутый круг получается.
Код


<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=parseInt(document.getElementById('karta').style.width)-10+'px'", 30);
}
function Resizee()
{
Timer = setInterval("document.getElementById('karta').style.width=parseInt(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  shape="rect" coords="25,36,114,98"  onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">
</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>

Автор: AKS 6.5.2007, 05:54
SiNaC0m, вот как-раз вариант с map давно уже сделан человеком по имени Ksnk на http://forum.dklab.ru/viewtopic.php?p=131946#131946 в вашей теме (можно сказать, специально для Вас). Что же Вас заставляет избегать возможности заглянуть в готовый вариант?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)