<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
.contenedor {
width: 100%;
height: auto;
background-color: rgba(109, 106, 107, 0.85);
}
.contenedor span {
float:left;
}
.contenedor span.url {
width: 26px;
height: 28px;
margin: 0 7px;
}
.contenedor span.url a img {
width: 26px;
height: 28px;
border: 1px solid #FFF;
z-index: auto;
}
.contenedor span.url a:hover img {
z-index: 99;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
</style>
<script type="text/javascript">
function Evento(elemento,nomevento,funcion) {
var fct=function(){
funcion.call(elemento,window.event);
}
elemento.attachEvent('on'+nomevento,fct);
return true;
}
window.onload = function() {
var thumb = document.querySelector('.contenedor').getElementsB yTagName('img');
for (var i = 0; i < thumb.length; i++) {
if(document.addEventListener) {
thumb[i].addEventListener('mouseover', function() {this.style.zIndex = 99; transAumenta(this, parseInt(document.defaultView.getComputedStyle(thi s, null).getPropertyValue('width')), parseInt(document.defaultView.getComputedStyle(thi s, null).getPropertyValue('height')))}, false);
thumb[i].addEventListener('mouseout', function() {clearTimeout(intervalo); this.style.border = "1px solid #FFF"; transDisminuye(this, parseInt(this.style.width), parseInt(this.style.height))}, false);
} else { // ie8-
Evento(thumb[i], 'mouseover', function() {this.style.zIndex = 99; transAumenta(this, parseInt(document.styleSheets[0].rules[5].style['width']), parseInt(document.styleSheets[0].rules[5].style['height']))});
Evento(thumb[i], 'mouseout', function() {clearTimeout(intervalo); this.style.border = "1px solid #FFF"; transDisminuye(this, parseInt(this.style.width), parseInt(this.style.height))});
}
}
};
var intervalo;
function transAumenta(bloque, ancho, alto) {
if (ancho <= 90) {
ancho +=3;
bloque.style.width = ancho + 'px';
intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto)}, 8);
} else if (alto <= 97) {
alto += 3;
bloque.style.height = alto + 'px';
intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto)}, 8);
}
}
function transDisminuye(bloque, ancho, alto) {
if (alto >= 31) {
alto -= 3;
bloque.style.height = alto + 'px';
setTimeout(function(){transDisminuye(bloque, ancho, alto)}, 8);
} else if (ancho >= 29) {
ancho -=3;
bloque.style.width = ancho + 'px';
setTimeout(function(){transDisminuye(bloque, ancho, alto)}, 8);
} else {
bloque.style.zIndex = 'auto';
}
}
</script>
</head>
<body>
<div class="contenedor clearfix">
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim01t.jpg" title="i1" alt="i1"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim02t.jpg" title="i2" alt="i2"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim03t.jpg" title="i3" alt="i3"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim05t.jpg" title="i4" alt="i4"></a></span>
</div>
</body>
</html>