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

Discussion in 'PHP' started by SiNaC0m, 15 Mar 2007.

  1. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    Начал пробывать реализовать это с помощью JS.
    Для начало сделал следующее:
    анимационное прокручивания большой картинки, тоесть все изображение не выводится на экран, а выводится лишь его часть.. и по нажатию на одну из четырех кнопок(вверх,вниз,влево,вправо) изображение смещается соответственно нажатой кнопке..
    Code:
    <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>
    Теперь мне нужно сделать следующее:
    Создать ещё две кнопки "+" и "-", при нажатии на которые, та часть изображения, которая в данный момент на экране, соотвественно увеличивалась и уменьшалась.

    Подскажите, какие свойства нужно использовать....
    нужно написать две функции, которые меняют кол-во выводимых пикселей в этой строчке
    Code:
    <img src="2.gif" style="width:1000px"/>
    Знающие люди помогите плиз....
     
    #1 SiNaC0m, 15 Mar 2007
  2. blaga

    blaga Elder - Старейшина

    Joined:
    23 Mar 2006
    Messages:
    884
    Likes Received:
    273
    Reputations:
    106
    загружай их в 50% масштабе, а при нажатии на кнопку изменяй масштаб... но тогда физическое разрешение картинки будет как 100%.
     
    #2 blaga, 15 Mar 2007
  3. gemaglabin

    gemaglabin Green member

    Joined:
    1 Aug 2006
    Messages:
    772
    Likes Received:
    842
    Reputations:
    1,369
    Я так понял тебе надо чтото вроде этого

    Code:
    <script>
	function resize(id,width)
	{
		document.getElementById(id).style.width=width;
	}
</script>
<img src='1.jpg' onclick="resize(this.id,500);" id='img1'/>
     
    #3 gemaglabin, 15 Mar 2007
    4 people like this.
  4. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    Мне нужна функиция, что бы при каждом нажатии на кнопку, количество пикселей увеличивалось на определенное число...
     
    #4 SiNaC0m, 15 Mar 2007
  5. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,194
    Reputations:
    252
    Вопроос в тему:
    Как сделать , чтобы картинка выводилась в 30% уменьшенном формате, а рпи наведении на нее был истинный размер :)
     
    #5 banned, 15 Mar 2007
  6. blaga

    blaga Elder - Старейшина

    Joined:
    23 Mar 2006
    Messages:
    884
    Likes Received:
    273
    Reputations:
    106
    2Isis, практически тоже самое что запостил Гема, только событие с onClick поменять на onMouseOver.
     
    #6 blaga, 15 Mar 2007
  7. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,194
    Reputations:
    252
    Неее.....мне надо чтобы бы было что-то типа тултипа.....
    Сначала картинка должна отображаться в 3 раза меньше истинного размера, а как навел на картинку , она в нормальном размере как в тултипе должна высветиться...
     
    #7 banned, 15 Mar 2007
  8. blaga

    blaga Elder - Старейшина

    Joined:
    23 Mar 2006
    Messages:
    884
    Likes Received:
    273
    Reputations:
    106
    я что то не понимаю что такое тул тип... Всмысле див сверху? Поточнее...
     
    #8 blaga, 15 Mar 2007
  9. Abra

    Abra Member

    Joined:
    17 Sep 2005
    Messages:
    278
    Likes Received:
    51
    Reputations:
    29
    Isis Тоже не понял что тебе надо...
    если просто увлечиение/всплываение/появление оригинальной картинки при наведении мышкой на ту же картинку, только меньшего размера, то тут основную идею уже показали. Остальное уже шлифовка.
    Можно более наворочено с помощью ajax'a, но смысл и основная идея от этого не сильно поменяются.
     
    #9 Abra, 15 Mar 2007
  10. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    gemaglabin
    Твой скрипт мне не совсем подходит, так как с помощью него картинка увеличивается лишь один раз...
    Мне же надо, что бы нажатие на кнопку вело к увеличению картинки...При том нажимать можно несколько раз...
    Вот...
     
    #10 SiNaC0m, 15 Mar 2007
  11. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    Всем спасибо!
    Люди помогли...и вот, что у меня получилось!
    Code:
    <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="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>
     
    #11 SiNaC0m, 15 Mar 2007
  12. banned

    banned Banned

    Joined:
    20 Nov 2006
    Messages:
    3,324
    Likes Received:
    1,194
    Reputations:
    252
    Тултип - вывод подсказки....
    все остальное уже описано прошлым постом
     
    #12 banned, 15 Mar 2007
  13. blaga

    blaga Elder - Старейшина

    Joined:
    23 Mar 2006
    Messages:
    884
    Likes Received:
    273
    Reputations:
    106
    просто нужно выводить скрытый див с картинкой во весь размер. что сложного?
     
    #13 blaga, 15 Mar 2007
  14. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    Появился еще один небольшой вопрос: можно ли на изображения поместить некоторое количество объектов(независящих друг от друга, например квадрат и треугольник, тыкаю на квадрат открывается одно меню, на треугольник - другое)?
    Где про это можно почитать?
     
    #14 SiNaC0m, 16 Mar 2007
  15. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    Кто-нибудь, объясните мне пожалуйсто, почему у меня объявленные функции действуют только на id="picture", а на id='p1' не деуствуют!? Где ошибка?
     
    #15 SiNaC0m, 25 Apr 2007
  16. bopoh13

    bopoh13 Elder - Старейшина

    Joined:
    31 Oct 2006
    Messages:
    195
    Likes Received:
    20
    Reputations:
    0
    см MAP & AREA
     
    #16 bopoh13, 26 Apr 2007
    Last edited: 26 Apr 2007
  17. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    Спасибо за советы! Только вот как мне теперь сделать что бы функции увеличения\уменьшения изображения заработали?
    Code:
    <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 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>
     
    #17 SiNaC0m, 26 Apr 2007
  18. Developer

    Developer Elder - Старейшина

    Joined:
    3 May 2006
    Messages:
    152
    Likes Received:
    25
    Reputations:
    10
    ИМХО лучше показывать маленьку картинку, 100x100 или приблизительно такого размера, при наведении на нее или нажатии подружать саму картинку через AJAX и показывать в всплывающем окошке.
     
    #18 Developer, 27 Apr 2007
  19. SiNaC0m

    SiNaC0m New Member

    Joined:
    27 Feb 2007
    Messages:
    8
    Likes Received:
    0
    Reputations:
    0
    В том то и дело, что мне надо именно так, как описанно в коде... Это что то типа ГуглМэп!
     
    #19 SiNaC0m, 27 Apr 2007
(You must log in or sign up to post here.)