IPB
ЛогинПароль:

> Внимание!

1. Пользуйтесь тегами кода. - [code] ... [/code]
2. Точно указывайте язык, название и версию компилятора (интерпретатора).
3. Название темы должно быть информативным.
В описании темы указываем язык!!!

Наладить общение поможет, если вы подпишитесь по почте на новые темы в этом форуме.

 
 Ответить  Открыть новую тему 
> JS: приближение\увеличение изображения
сообщение
Сообщение #1


Новичок
*

Группа: Пользователи
Сообщений: 18
Пол: Мужской
Реальное имя: SiNaC0m

Репутация: -  0  +


Есть HTML файл, который выводит изображение, загружаемое с помощью php. Нужно, что бы по кнопке (или колесу мыши) изображение уменьшалось\увеличивалось.
Может кто-нибудь подскажет, как приближать\отдалять(уменьшать\увеличивать) изображение (например как в Google maр).


--------------------
Мы стремимся к знаниям... вы называете нас преступниками. Мы существуем без цвета кожи, без национальности и религиозных предубеждений... вы называете нас преступниками. Вы производите атомные бомбы, разжигаете войны, убиваете, обворовываете и врете нам, пытаясь убедить в своей правоте... а мы все также остаемся преступниками.
© Mentor
 Оффлайн  Профиль  PM 
 К началу страницы 
+ Ответить 
сообщение
Сообщение #2


Ищущий истину
******

Группа: Пользователи
Сообщений: 4 825
Пол: Мужской
Реальное имя: Олег

Репутация: -  45  +


Я думаю это задача для JS а не для PHP.
Тебе нужно отслеживать события у клиента и изменять картинку у клиента - на лицо признаки исполнения у клиента, поэтому JS.
Правда я думаю есть возможность реализации этого с помощью AJAX и PHP (чисто интуитивно есть такое предположение).

Поэтому смотри методы обработки событий в JS и методы изменения размеров изображения...

М
Отредактировал название темы



Сообщение отредактировано: Altair -


--------------------
Помогая друг другу, мы справимся с любыми трудностями!
"Не опускать крылья!" (С)
 Оффлайн  Профиль  PM 
 К началу страницы 
+ Ответить 
сообщение
Сообщение #3


Новичок
*

Группа: Пользователи
Сообщений: 18
Пол: Мужской
Реальное имя: SiNaC0m

Репутация: -  0  +


Altair
Спасибо за совет.

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

HTML
<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>


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

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

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


--------------------
Мы стремимся к знаниям... вы называете нас преступниками. Мы существуем без цвета кожи, без национальности и религиозных предубеждений... вы называете нас преступниками. Вы производите атомные бомбы, разжигаете войны, убиваете, обворовываете и врете нам, пытаясь убедить в своей правоте... а мы все также остаемся преступниками.
© Mentor
 Оффлайн  Профиль  PM 
 К началу страницы 
+ Ответить 
сообщение
Сообщение #4


Новичок
*

Группа: Пользователи
Сообщений: 18
Пол: Мужской
Реальное имя: SiNaC0m

Репутация: -  0  +


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


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

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


--------------------
Мы стремимся к знаниям... вы называете нас преступниками. Мы существуем без цвета кожи, без национальности и религиозных предубеждений... вы называете нас преступниками. Вы производите атомные бомбы, разжигаете войны, убиваете, обворовываете и врете нам, пытаясь убедить в своей правоте... а мы все также остаемся преступниками.
© Mentor
 Оффлайн  Профиль  PM 
 К началу страницы 
+ Ответить 
сообщение
Сообщение #5


Новичок
*

Группа: Пользователи
Сообщений: 18
Пол: Мужской
Реальное имя: SiNaC0m

Репутация: -  0  +


Вот работоспособный код....
Код
<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>



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


--------------------
Мы стремимся к знаниям... вы называете нас преступниками. Мы существуем без цвета кожи, без национальности и религиозных предубеждений... вы называете нас преступниками. Вы производите атомные бомбы, разжигаете войны, убиваете, обворовываете и врете нам, пытаясь убедить в своей правоте... а мы все также остаемся преступниками.
© Mentor
 Оффлайн  Профиль  PM 
 К началу страницы 
+ Ответить 

 Ответить  Открыть новую тему 
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 





- Текстовая версия 28.09.2020 1:00
500Gb HDD, 6Gb RAM, 2 Cores, 7 EUR в месяц — такие хостинги правда бывают
Связь с администрацией: bu_gen в домене octagram.name