Foros del Web - Ver Mensaje Individual - Mostrar una capa despues de que pase algo

emprear · #4 (**permalink**) 11/08/2012, 14:02

Como yo lo interpreto tiene que suceder esto

Abris la página --> solo se ve la miniatura
haces mouseover sobre la miniatura --> la miniatura se expande hasta 456px y con una pequeña demora se muestra la leyenda
si desplazás el cursor por el resto de la página --> todo que da tal cual
click en la imagen --> se restablece el tamaño a la miniatura y se oculta el mensaje

Ahora, el código que yo te puse hace exactamente eso (IE, Firefox, Opera), pero acabo de descubrir que en Chrome NO, así que es muy probable que estés utilizando Chrome. Desde luego que en IE la transición no se muestra

Para arreglarlo, hice esto

Código HTML:

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">
/*<![CDATA[*/
  #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 type="text/javascript">
//<![CDATA[
  function agrandar(){
  document.getElementById('imagen').style.width='456px';
  document.getElementById('imagen').style.height='473px';
  document.getElementById('imagen').style.borderRadius='20px';
 
  setTimeout('mostrar()', 1500);
  }
  function volver() {
  document.getElementById('imagen').style.width='20px';
  document.getElementById('imagen').style.height='20px';
  document.getElementById('imagen').style.borderRadius='1px'
  document.getElementById('mostrar').style.visibility = 'hidden';
  document.getElementById('mostrar').style.opacity = '0.01';
  }
  function mostrar() {
  var imagen = document.getElementById('imagen').style.width;
  if(imagen == '456px'){
  document.getElementById('mostrar').style.visibility = 'visible';
  document.getElementById('mostrar').style.opacity = '1';
  }
  }
  //]]>
  </script>
 </head>
 <body>
  <img src="http://javascriptcsspr.comli.com/css/images2/combate_gatuno.jpg" id="imagen" onmouseover="agrandar()" onclick="volver();" alt="" name="imagen" /> <span style=
  "position:absolute; left: 480px; top: 146px; width: 210px; height: 41px; background-color:#0CF; padding:10px; border-radius:10px; visibility:hidden; opacity: 0.01; -webkit-transition:all 2s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease;"
  id="mostrar">Pulse en la imagen para volver a su estado anterior.</span>
 </body>
</html>

Es decir, utilizo
var imagen = document.getElementById('imagen').style.width;
if(imagen == '456px'){
en lugar de
var imagen = document.images[0].width;
if(imagen == 456){

demo:
http://foros.emprear.com/html/agrandar.html

Salvo por lo de la transición, en ahora en todos hace lo mismo, incluido Chrome
Si no es eso lo que estás buscando, sinceramente no lo entiendo

Saludos