Posted By

pablazo on 09/18/06


Tagged

iframe javascript select html capas


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

luman
meth
Hirmine


capas que tapan selects mediante iframe


 / Published in: JavaScript
 

URL: http://www.forosdelweb.com/showthread.php?t=105325&page=8

  1. <html>
  2. <head>
  3. <script>
  4. function mostrar_ocultar(idCapa) {
  5. var obj_iframe_oculto = document.getElementById("iframe_oculto");
  6. capa = document.getElementById(idCapa);
  7.  
  8. // Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
  9. obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
  10. obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape
  11.  
  12. // Definimos que el contenido del IFRAME esté VISIBLE
  13. obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
  14.  
  15. // Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
  16. obj_iframe_oculto.style.width = capa.offsetWidth;
  17. obj_iframe_oculto.style.height = capa.offsetHeight;
  18. // Bajamos de Z-index el IFRAME, para que esté debajo de la capa
  19. obj_iframe_oculto.style.zIndex = capa.style.zIndex - 1;
  20.  
  21. capa.style.display = "block";
  22.  
  23. if (capa.style.visibility == 'hidden') {
  24. capa.style.visibility = 'visible';
  25. } else {
  26. capa.style.visibility = 'hidden';
  27. obj_iframe_oculto.style.display = "none";
  28. }
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <!-- capa ayuda position: absolute; left: 515px; top: 41px;z-index: 1 -->
  34. <div id="capaAyuda" style="position: absolute; left: 10px; top: 41px;z-index: 100; visibility: hidden; margin-bottom: -10;">
  35. <!--------- PRINCIPIO DE LA LEYENDA -------------->
  36. <table width="357" height="10" border="0" cellpadding="0" cellspacing="0">
  37. <tr>
  38. <td width="23" height="10"><img src="Images/esquina_IzqSup.gif" alt="" width="23" height="10" /></td>
  39. <td width="100%" height="10" background="Images/fondoEsquinas.gif"><img src="Images/pixel.gif" alt="" width="1" height="10" /></td>
  40. <td width="25" height="10"><img src="Images/esquina_DrhSup.gif" alt="" width="25" height="10" /></td>
  41. </tr>
  42. </table>
  43. <table width="357" border="0" cellpadding="0" cellspacing="0">
  44. <tr>
  45. <td width="23" background="Images/fondoLateralIzq.gif"><img src="Images/pixel.gif" alt="" width="23" height="1" /></td>
  46. <td width="100%" valign="top" background="Images/fondoCaja.gif"><label><img src="Images/checkRojo.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: No Vigente<br />
  47. <img src="Images/checkNaranja.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: Vigente, sin cambios en &uacute;ltimos 15 d&iacute;as<br />
  48. <img src="Images/checkAmarillo.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: Vigente, iniciada en los &uacute;ltimos 15 d&iacute;as<br />
  49. <img src="Images/checkVerde.gif" alt="" width="11" height="11" vspace="4" align="absmiddle" /> Promo: Vigente, modificada en los &uacute;ltimos 15 d&iacute;as</label></td>
  50. <td width="25" background="Images/fondoLateralDrh.gif"><img src="Images/pixel.gif" alt="" width="25" height="1" /></td>
  51. </tr>
  52. </table>
  53. <table width="357" height="19" border="0" cellpadding="0" cellspacing="0">
  54. <tr>
  55. <td width="23" height="19"><img src="Images/esquina_IzqInf.gif" alt="" width="23" height="19" /></td>
  56. <td width="100%" height="19" background="Images/fondoFin.gif"><img src="Images/pixel.gif" alt="" width="1" height="19" /></td>
  57. <td width="25" height="19"><img src="Images/esquina_DrhInf.gif" alt="" width="25" height="19" /></td>
  58. </tr>
  59. </table>
  60. <!--------- FINAL DE LA LEYENDA -------------->
  61. </div>
  62. <a href="javascript:mostrar_ocultar('capaAyuda');">Mostrar/Ocultar</a> <br>
  63. <select id="selectTipo" name="selectTipo">
  64. <option value="uno" selected >uno</option>
  65. <option value="dos" >dos</option>
  66. </select>
  67. <iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:41px; left:0px; display:none;"></iframe>
  68. </body>
  69. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: section31 on September 18, 2006

You need to login to post a comment.