Tema: Mostrar una capa despues de que pase algo
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/08/2012, 11:05
Avatar de patilanz
patilanz
 
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 10 meses
Puntos: 29
Respuesta: Mostrar una capa despues de que pase algo
Cita:
Iniciado por emprear Ver Mensaje
yo haría esto
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.   <title>
  7.    Documento sin título
  8.   </title>
  9.   <style type="text/css">
  10. /*<![CDATA[*/
  11.   #imagen {
  12.   width:20px;
  13.   height:20px;
  14.   border:thin;
  15.   border-width:1px;
  16.   border-radius:1px;
  17.   -webkit-transition:all 2s ease;
  18.   -moz-transition:all 1s ease;
  19.   -o-transition:all 1s ease;
  20.   transition:all 1s ease; 
  21.   }
  22.   /*]]>*/
  23.   </style>
  24.   <script type="text/javascript">
  25. //<![CDATA[
  26.   function agrandar(){
  27.   document.getElementById('imagen').style.width='456px';
  28.   document.getElementById('imagen').style.height='473px';
  29.   document.getElementById('imagen').style.borderRadius='20px';
  30.  
  31.   setTimeout('mostrar()', 1500);
  32.   }
  33.   function volver() {
  34.   document.getElementById('imagen').style.width='20px';
  35.   document.getElementById('imagen').style.height='20px';
  36.   document.getElementById('imagen').style.borderRadius='1px'
  37.   document.getElementById('mostrar').style.visibility = 'hidden';
  38.   document.getElementById('mostrar').style.opacity = '0.01';
  39.   }
  40.   function mostrar() {
  41.   var imagen = document.images[0].width;
  42.   if(imagen == 456){
  43.   document.getElementById('mostrar').style.visibility = 'visible';
  44.   document.getElementById('mostrar').style.opacity = '1';
  45.   }
  46.   }
  47.   //]]>
  48.   </script>
  49.  </head>
  50.  <body>
  51.   <img src="http://javascriptcsspr.comli.com/css/images2/combate_gatuno.jpg" id="imagen" onmouseover="agrandar()" onclick="volver();" alt="" name="imagen" /> <span style=
  52.   "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;"
  53.   id="mostrar">Pulse en la imagen para volver a su estado anterior.</span>
  54.  </body>
  55. </html>

Saludos
Gracias por tu respuesta pero la cosa esq casi funciona como lo quiero .
Lo que si me funciono es que cuando le doy click en la imagen desaparece pero lo que no quiero esq cuando al abrir la pagina, la imagen es pequena y voy con el raton y empieza a agrandarse(esto si) pero cuando llega al tamano maximo o el tamano que le he puesto no aparece el span pero si aparece si salgo de la imagen y voy denuevo con el raton sobre ella.. Es decir que cuando ya esta grande debo de salir con el raton de la imagen y volver a ir, esto no lo quiero. Quiero que cuando termine de ser grande aparesca el span independientemente del raton.


Me puedes ayudar con ests pls

Un saludo