Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамическое изменение размеров изображения (https://javascript.ru/forum/dom-window/1351-dinamicheskoe-izmenenie-razmerov-izobrazheniya.html)

Макс 28.06.2008 13:37

Динамическое изменение размеров изображения
 
Здравствуйте!
Моя задача создать эффект, который позволил бы при наведении на любую картинку, увеличивать ее до определенных размеров, и возвращать обратно.
Тем самым показать динамическое изменение картинки пользователю.
(P.S. создаю чисто для визуального эффекта, применять можно в фото галереях).

Вот код:
<html>
       <head>
         <style>
	.image {
		width:100px;
		height:100px;
		cursor:pointer;
		position:absolute;
	}
          </style>
          <script>
	function expand(elem) {
		var imH = elem.offsetHeight;
		var imW = elem.offsetWidth;
		var posLeft = elem.offsetLeft;
		var posTop = elem.offsetTop;
		    posLeft--;
		    posTop--;
		    imH++;
		    imW++;
			if(imW <= 120) {
				elem.style.left = posLeft;
				elem.style.top = posTop;
		      		elem.style.width = imW + 1;
		      		elem.style.height = imH + 1;
		     	 timerID = setTimeout("expand()", 10);
			}
	}
	function revert(elem) {
		var imW = elem.offsetWidth;
		var imH = elem.offsetHeight;
		var posLeft = elem.offsetLeft;
		var posTop = elem.offsetTop;
		      posLeft++;
		      posTop++;
		      imW--;
		      imH--;
			elem.style.left = posLeft;
			elem.style.top = posTop;
		      	elem.style.width = imW - 1;
		      	elem.style.height = imH - 1;
				if(imW <= 102) {
					return false
				}
		     	timerID = setTimeout("revert()", 20);
	}
          </script>
       </head>
       <body>
	<img src="forScale.jpg" class="image" id="img1" onmouseover="expand(this)" onmouseout="revert(this)">
       </body>
</html>


Вопрос:
Подскажите, почему когда я передаю функциям параметр "elem" как аргумент ("revert(elem) & expand(elem)", а затем onmouseover="revert(this)" onmouseout="expand(this)"), то после "первого круга" выполнения этих ф-ций, у меня в фаербаге выдает ошибку "elem has no properties", и изменение прекращается.

Объясните пожалуйста почему так происходит, и, если это возможно,
подскажите как это исправить.

Заранее благодарен.

Андрей Параничев 28.06.2008 13:46

Задавайте новые вопросы в новых темах, пожалуйста.
Попробуйте в вызовах таймера поставить так:
timerID = setTimeout(function(){expand(elem)}, 10);
timerID = setTimeout(function(){revert(elem)}, 20);


У вас не передавался элемент, при вызове по тайм-ауту.

Макс 28.06.2008 15:02

Спасибо Андрей, т.е. таким вот методом timerID = setTimeout(function(){expand(elem)}, 10) надо пользоваться когда передаешь функции параметр как аргумент да?

Андрей Параничев 28.06.2008 15:13

Макс,
Да. Может можно еще как-то, но я обычно пользуюсь таким способом.

Макс 28.06.2008 17:21

Вложений: 1
Андрей, Вы бы не могли мне подсказать как мне быть с "глюками" картинок(не с теми глюками которыми Вы подумали;) ).
Просмотрите архив и быстро пробегите по изображениям. Т.е. когда я быстро "пробегаю" курсором миши по изображениям, то они бывают дрожат, ну а потом все восстанавливаются. Я предполагаю что это потому что условие, в функции которая увеличивает изображения(expand()), по смыслу такое же как и в ф-ции которая сжимает их(). И поэтому пока не выполнится expand() не начнется revert(). Может Вы подскажите в каком направлении мне думать чтоб этого избежать:D ?

И еще, если у Вас есть ИЕ6, то там, при увеличении картинок, они слегка тормозят. От чего это зависит? От браузера?

Макс 21.07.2008 11:36

Изменение размера элемента DIV
 
Подскажите пожалуйста новичку!
Вот код:
<html>
	<head>
	<style>	
	#outer {
		position:absolute;
		width:50%;
		height:325px;
		background-color:lightsteelblue;
		display:block;
		overflow:hidden;
	}
	</style>
	<script>
	function minimaize() {
		var relative = document.getElementById("outer");
		var sizeHeight = relative.offsetHeight;
		if(sizeHeight >= 25) {
			sizeHeight--;
			relative.style.height = sizeHeight - 9
		}
		timerID = setTimeout(function() {minimaize()}, 1);
	}
	function maximaize() {
		var relative = document.getElementById("outer");
		var sizeHeight = relative.offsetHeight;
		if(sizeHeight <=300) {
			sizeHeight++;
			relative.style.height = sizeHeight + 9
		}
		timerID = setTimeout(function() {minimaize()}, 1);
	}
	function change(obj) {
	          if(document.getElementById("outer").style.height >= 25) {
		obj.addEventListener("click", minimaize, false)
	          } else {
		obj.addEventListener("click", maximaize, false)
	          }
	}
	</script>
	</head>
	<body>
	<button onclick="change()">Show/Hide</button>
		<div id="outer">
		</div>
	</body>
	</html>

Как мне связать две ф-ции вместе, т.е. нажал на кнопку - открылось окно, нажал - закрылось. Но проблема в том что я не изменяю display = "block/none", и не меняю классы, а динамически увеличиваю и уменьшаю высоту элемента DIV, посредством двух функций minimaize() & maximaize(). Я не могу подобрать условие в ф-ции change(). Не хватает у меня винтиков, да и болтиков тоже. Подскажите как одной кнопке, в одном событии можно присвоить две ф-ции, или хотябы распределить их как в ф-ции change(), можно привести другой пример, не обязательно справлять этот, главное чтоб логика была понятна.
Куда и в каком направлении мне двигаться?
Жду Ваших отзывов.

Заранее благодарен!

Андрей Параничев 21.07.2008 12:06

Макс,
Для новых вопросов создавайте, пожалуйста, отдельные темы.
Вы можете воспользоваться статической переменной, чтобы сделать функцию-реле, т.е. функцию в которой чередуется выполнение кода при каждом вызове, вот пример:
function change() {
    var static = arguments.callee;
    
    if(typeof static.state == "undefined")
        static.state = false;
    
    if(!static.state)
    {
        alert(0); // Тут ставите одно событие
        static.state = true;
    } else {
        alert(1); // Тут ставите второе событие
        static.state = false;
    }
}

change()
change()
change()
change()

Макс 21.07.2008 15:55

У меня не выходит. При первом нажатии выполняется условие 1, а при последующем, условие 2 просто останавливает условие 1.


Часовой пояс GMT +3, время: 04:05.