Динамическое изменение размеров блока при наведении мыши!
 

Всем доброго времени суток!
задача вроде бы проста, при наведении на кноку(ячейку), динамически изменяется размер "div"-a., после "mouseout" возврат к исходным размерам (и то, и другое плавно!)
В нижеследующем примере кода возникает такой эффект:
при первом наведении мыши на объект, ничего не происходит, второй и все последующие разы работает так, как должно быть.
(аналогично для всех кнопок.)
Подскажите плиз что я делал "не так".

В .js
=================================

function chsz (xobj, id, w, h, speed) {
var t1, t2;
var obj=(MSIE)? document.all(id) : document.getElementById(id);
var n=Number(obj.offsetWidth), m=Number(obj.offsetHeight);
var x=Number(obj.offsetWidth), y=Number(obj.offsetHeight);
xobj.onmouseover=function (){
clearTimeout(t2);
if (n < w) {n+=5; obj.style.width=n};
if (m < h) {m+=5; obj.style.height=m};
t1 = setTimeout(arguments.callee, speed);
if (n >= w && m >= h) {clearTimeout(t1)};
};
xobj.onmouseout=function (){
clearTimeout(t1);
if (n > x) {n-=5; obj.style.width=n};
if (m > y) {m-=5; obj.style.height=m};
t2 = setTimeout(arguments.callee, speed);
if (n <= x && m <= y) {clearTimeout(t2)};
};
return;
}

=================================

вызов:
=================================
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','1') ">..........</td>
=================================

При первом mouseover навешивается событие onmouseover, но не вызывается.

function chsz(xobj, id, w, h, speed){
    var t1, t2;
    var obj=document.getElementById(id);
    var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);

    t1 = setInterval(function(){
        if(n<w){
            n+=5;
            obj.style.width=n+'px'
        }
        if(m<h){
            m+=5;
            obj.style.height=m+'px'
        }
        if(n>=w&&m>=h){
            clearInterval(t1)
        }
    }, speed);
    xobj.onmouseover=function(){
        clearInterval(t2);
        t1 = setInterval(function(){
            if(n<w){
                n+=5;
                obj.style.width=n+'px'
            }
            if(m<h){
                m+=5;
                obj.style.height=m+'px'
            }
            if(n>=w&&m>=h) clearInterval(t1)
        }, speed);
    };
    xobj.onmouseout=function (){
        clearInterval(t1);
        t2 = setInterval(function(){
            if(n>x){
                n-=5;
                obj.style.width=n+'px'
            }
            if(m>y){
                m-=5;
                obj.style.height=m+'px'
            }
            if(n<=x&&m<=y) clearInterval(t2)
        }, speed);
    };
    return
}

Re: e1f (динамическое изменение размеров блока)
 

Thanks!
было такое предчувствие....
Кстати, а можно ли програмно вызвать такое событие (mouseover).
На нескольких форумах нашёл что-то типа "obj.onMouseover()",
но пока это не работает...
Да, и ещё с вышеприведенным кодом остается такая ерунда:
при первом наведении мыши на новый объект, блок ведет себя не предсказуемо...
т.е. когда я первый раз навожу на первую кнопку, затем быстро перевожу курсор мыши на вторую кнопку, блок продолжает уменьшать свой размер. даже когда курсор перемещается над этой кнопкой блок никак не реагирует, либо разворачивается и сворачивается по 2 раза...
после того как навожу курсор на эту кнопку второй и все последующие раз - все работеат идеально!!!
Никак не могу въехать, что там происходит не так...
Как я понимаю, после первого запуска функции объект остается жить дальше и при последующих запусках отлично срабатывает xobj.onmouseover, но почему возникают такие глюки при первом запуске не въезжаю...

function chsz(xobj, id, w, h, speed){
    var t1, t2;
    var obj=document.getElementById(id);
    var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);
 
    xobj.onmouseover=function(){
        clearInterval(t2);
        t1 = setInterval(function(){
            if(n<w){
                n+=5;
                obj.style.width=n+'px'
            }
            if(m<h){
                m+=5;
                obj.style.height=m+'px'
            }
            if(n>=w&&m>=h) clearInterval(t1)
        }, speed);
    };
    xobj.onmouseover();
    xobj.onmouseout=function (){
        clearInterval(t1);
        t2 = setInterval(function(){
            if(n>x){
                n-=5;
                obj.style.width=n+'px'
            }
            if(m>y){
                m-=5;
                obj.style.height=m+'px'
            }
            if(n<=x&&m<=y) clearInterval(t2)
        }, speed);
    };
    return
}

А так сработает?
P.S. .onMouseover и .onmouseover -- разные методы

Не-а... :(
Эксплорер: "bufer overflow";
лиса тихо умерла (- не работает ничего!)
под остальными не пробовал.

В Лисе работает. На таком наборе:

<script type="text/javascript">
<!--
function chsz(xobj, id, w, h, speed){
    var t1, t2;
    var obj=document.getElementById(id);
    var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);

    t1 = setInterval(function(){
        if(n<w){
            n+=5;
            obj.style.width=n+'px'
        }
        if(m<h){
            m+=5;
            obj.style.height=m+'px'
        }
        if(n>=w&&m>=h){
            clearInterval(t1)
        }
    }, speed);
    xobj.onmouseover=function(){
        clearInterval(t2);
        t2=null;
        if (!t1) t1 = setInterval(function(){
            if(n<w){
                n+=5;
                obj.style.width=n+'px'
            }
            if(m<h){
                m+=5;
                obj.style.height=m+'px'
            }
            if(n>=w&&m>=h) clearInterval(t1)
        }, speed);
    };
    xobj.onmouseout=function (){
        clearInterval(t1);
        t1=null;
        if (!t2) t2=setInterval(function(){
            if(n>x){
                n-=5;
                obj.style.width=n+'px'
            }
            if(m>y){
                m-=5;
                obj.style.height=m+'px'
            }
            if(n<=x&&m<=y) clearInterval(t2)
        }, speed);
    };
    return
}
-->
</script>
</head>
<body>
<table><tr>
<td id="libcell" style="border:1px solid red" onmouseover="chsz(this,'descrlib','100','100','1') ">..........</td></tr></table>
<div id="descrlib" style="width:10px;height:10px;border:1px solid green"></div>
</body>
</html>

да, но глюки остались, попробуйте код ниже.
Если после загрузки страницы быстро переводить курсор с кнопки на кнопку, то глюки хорошо видны, после нескольких наведений на объект - работает нормально.
Кстати я у себя изменил на "var x=0, y=0;" так лучше работает, т.к. при наведении на новый объект он запоминает текущие размеры блока и
если тот еще не успел вернутся к исходному, - получится не красиво :) )

================================================== ==

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<Head>
<style>
.libtable{
border: thin solid black;
width-max: 600;
border: 1px solid #fff;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
text-align: center;
margin: 0 auto;
padding: 0;
border-spacing: 0;
border-spacing: 30px;
}
#libcell {
color: #999;
font-weight: bold;
border: 1px solid #eee;
background-color: #fbfefe;
width: 100px;
height: 100px;
}
#libcell:hover {
color: #000;
font-weight: bold;
border: thin solid #eee;
background-color: #f6fafa;
}
</style>
<script type="text/javascript">
<!--
function chsz(xobj, id, w, h, speed){
var t1, t2;
var obj=document.getElementById(id);
var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);

t1 = setInterval(function(){
if(n<w){
n+=5;
obj.style.width=n+'px'
}
if(m<h){
m+=5;
obj.style.height=m+'px'
}
if(n>=w&&m>=h){
clearInterval(t1)
}
}, speed);
xobj.onmouseover=function(){
clearInterval(t2);
t2=null;
if (!t1) t1 = setInterval(function(){
if(n<w){
n+=5;
obj.style.width=n+'px'
}
if(m<h){
m+=5;
obj.style.height=m+'px'
}
if(n>=w&&m>=h) clearInterval(t1)
}, speed);
};
xobj.onmouseout=function (){
clearInterval(t1);
t1=null;
if (!t2) t2=setInterval(function(){
if(n>x){
n-=5;
obj.style.width=n+'px'
}
if(m>y){
m-=5;
obj.style.height=m+'px'
}
if(n<=x&&m<=y) clearInterval(t2)
}, speed);
};
return
}
-->
</script>
</head>
<body>
<table class="libtable" align="center" border="1">
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Books</td>
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Articles</td>
</tr>
<tr>
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Software</td>
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Wallpapers</td>
</table>
<div id="descrlib" style="width:10px;height:10px;border:1px solid green"><span></span></div>
</body>
</html>

================================================== ==

Динамическое изменение размера div-a при наведении на кнопку!
 

Решил таким способом: (см. вложенный файл)
теперь всё работает идеально!

P.S.
Тестилось на FF и IE7...

Спасибо e1f за помощь и участие!!!!!