Foros del Web - Ver Mensaje Individual

pelusete · #1 (**permalink**) 04/07/2008, 18:50

Hola amigos....alguno de uds me podria ayudar a configurar bien este code, de manera que cuando haga click en el div , éste "aumente" de largo y cuando saque el raton del div, éste "disminuya" su largo?

He tratado varios dias ya, pero no logro tratar de sincronizar las funciones... :S

Cita:

<html>
<head>

<style>
body { background: #777; }
#cont { width: 200px; height: auto; background: #333; padding: 10px; }
#med { width: 200px; height: 20px; background: #069; }
#otro { width: 200px; height: 20px; background: #069; color: white; }
</style>

<script language="javascript">

var w = 0;
var largo = 0;

function atras(elId, xi, xf)
{
var obj = document.getElementById(elId);

if( largo <= xi ) obj.style.width = xi;
else
{
w = w - 15;
obj.style.width = xi + w +"px";
largo = parseInt(obj.style.width);
obj.innerHTML = "Ava Width (" + largo +")";
setTimeout("adelante('"+elId+"', "+xi+", "+xf+")",1000);
}

}

function adelante(elId, xi, xf)
{
var obj = document.getElementById(elId);

if( largo >= xf ) obj.style.width = xf;
else
{
w = w + 15;
obj.style.width = xi + w +"px";
largo = parseInt(obj.style.width);
obj.innerHTML = "Ava Width (" + largo +")";
setTimeout("adelante('"+elId+"', "+xi+", "+xf+")",1000);
}
}

</script>
</HEAD>

<BODY>

<div id=cont>
<div id="otro" onclick="adelante('otro', 200, 250);" onmouseout="atras('otro', 200, 250);">otro</div>
</div>

</BODY>
</html>