Hola quiero hacer que cuando una imagen ya ha llegado a los 456 px de anchura se muestre un cuadro de aviso y luego cuando empieza a poner se mas pequena es decir que tener menos anchura se oculto. Y luego si la imagen llega otra vez tambien se muestre y luego oculte.
Tengo el siguiente codigo javascript
Código Javascript
:
Ver original<!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>Documento sin título</title>
<style type="text/css">
#imagen {
width:20px;
height:20px;
border:thin;
border-width:1px;
border-radius:1px;
-webkit-transition:all 2s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
</style>
<script language="javascript">
function agrandar(){
document.getElementById('imagen').style.width='456px';
document.getElementById('imagen').style.height='473px';
document.getElementById('imagen').style.borderRadius='20px';
setTimeout(mostrar(),2000);
}
function volver() {
document.getElementById('imagen').style.width='20px';
document.getElementById('imagen').style.height='20px';
document.getElementById('imagen').style.borderRadius='1px'
}
function mostrar() {
var imagen = document.images[0].width;
if(imagen == 456){
document.getElementById('mostrar').style.visibility = 'visible';
} else {
document.getElementById('mostrar').style.visibility = 'hidden';
}
}
</script>
</head>
<body onload="mostrar()">
<img src="images2/combate_gatuno.jpg" id="imagen" onmouseover="agrandar()" onclick="volver();" />
<span style="position:absolute; left: 462px; top: 146px; width: 210px; height: 41px; background-color:#0CF; padding:10px; border-radius:10px; visibility:hidden;" id="mostrar">Pulse en la imagen para volver a su estado anterior.</span>
</body>
</html>
Pero el problema es que la capa se muestra solo si ha llegado a los 456 px y el raton esta sobre la imagen pero yo quiero que no aga falta que este sobre la imagen y luego tambien desaparece si solo no tiene los 456 px y el raton esta sobre la imagen...
Tengo la pagina subida aqui por si quieren verla : http://javascriptcsspr.comli.com/css/imagen_agrandar.html
Gracias :)