Здравствуйте!
Моя задача создать эффект, который позволил бы при наведении на любую картинку, увеличивать ее до определенных размеров, и возвращать обратно.
Тем самым показать динамическое изменение картинки пользователю.
(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", и изменение прекращается.
Объясните пожалуйста почему так происходит, и, если это возможно,
подскажите как это исправить.
Заранее благодарен.