<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#capa1 {
width: 70px;
height: 70px;
background-color: yellow;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('capa1').onclick = creaIntervalo;
}
window.onload = function() {
var capa = document.getElementById('capa1');
if(capa.addEventListener) {
capa.addEventListener('click', function() {
//alert(document.defaultView.getComputedStyle(capa, null).getPropertyValue('width'));
creaIntervalo(this.id, document.defaultView.getComputedStyle(capa, null).getPropertyValue('width'), // getComputedStyle() todos excepto ie8-
document.defaultView.getComputedStyle(capa, null).getPropertyValue('height')
)},
false
);
} else {
capa.attachEvent('onclick', function() {
//alert( document.styleSheets[0].rules[0].style['width']);
creaIntervalo(capa.id, document.styleSheets[0].rules[0].style['width'],
document.styleSheets[0].rules[0].style['height']
)}
);
}
}
function creaIntervalo(elem, w_bloque, h_bloque) {
var bloque = document.getElementById(elem);
var w_bloque = w_bloque;
var h_bloque = h_bloque;
if (typeof(boleano) == "undefined" || boleano == 0) {
boleano = 1;
despliega(bloque, w_bloque, h_bloque);
}else{
boleano = 0;
repliega(bloque, w_bloque, h_bloque);
}
}
function despliega(bloque, w, h) {
var ancho = parseInt(w);
var largo = parseInt(h);
if (ancho <= 210) {
ancho +=3;
bloque.style.width = ancho + 'px';
var intervalo = setTimeout(function(){despliega(bloque, ancho, largo)}, 8);
} else if (largo <= 210) {
largo += 3;
bloque.style.height = largo + 'px';
var intervalo = setTimeout(function(){despliega(bloque, ancho, largo)}, 8);
} else {
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[0].style['width'] = ancho + 'px';
document.styleSheets[0].rules[0].style['height'] = largo + 'px';
}
clearTimeout(intervalo);
}
}
function repliega(bloque, w, h) {
var ancho = parseInt(w);
var largo = parseInt(h);
if (largo >= 73) {
largo -= 3;
bloque.style.height = largo + 'px';
var intervalo = setTimeout(function(){repliega(bloque, ancho, largo)}, 8);
} else if (ancho >= 73) {
ancho -=3;
bloque.style.width = ancho + 'px';
var intervalo = setTimeout(function(){repliega(bloque, ancho, largo)}, 8);
} else {
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[0].style['width'] = ancho + 'px';
document.styleSheets[0].rules[0].style['height'] = largo + 'px';
}
clearTimeout(intervalo);
}
}
</script>
</head>
<body>
<div id="capa1">pulsa aquí!!<br /><br /><br /><br />Este texto no lo habías visto<br /><br /><br />pulsa otra vez!!</div>
</body>
</html>