Publicentral.com - promocion de paginas webpromocion de paginas web
Mostrando Codigo - Javascript
Code

Javascript - Divertida galeria de imagenes

Códigos Javascript

El codigo muestra una galeria de imagenes de una forma divertida
Visitas: 50,088 - 04-05-2007 01:27:58
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <head>
  2. <script language="javascript">
  3. // Si no hay capa creada
  4. var trigger=0
  5. // Si no hay capa activada
  6. var vis=0
  7. function initthumb()
  8. {
  9. document.onmousemove = sniff
  10. document.onmouseup = sniff
  11. document.onmousedown = sniff
  12. // Comprobacion para netscape
  13. if (document.layers){document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}
  14. // Ayuda para explorer a obtener la altura
  15. if (document.all)dopic('dummy','',1,1,1,1)
  16. }
  17. function sniff(e){
  18. // Coje posicion del raton
  19. if (document.layers) {var mousex=e.pageX; var mousey=e.pageY;fx=mousex;fy=mousey;}
  20. else if (document.all) {var mousex=event.x; var mousey=event.y+document.body.scrollTop;fx=mousex;fy=mousey}
  21. }
  22. function dopic(name,auto,picx,picy)
  23. {
  24. if (vis == 0)
  25. {
  26. // Coordenadas predefinidas
  27. var oldpicx=100;
  28. var oldpicy=100;
  29. //border-color
  30. var rahmen='silver'
  31. // Texto Alt
  32. var alttext="Click to close the picture"
  33.  
  34. // Si no se encuentra una capa
  35. if (trigger!=1)
  36. {
  37. trigger=1 // Se ha detectado una capa
  38. // Crea una capa oculta
  39. if(document.layers){
  40. //Piclayer
  41. document.layers['picarea'] = new Layer(1);
  42. document.layers['picarea'].left = oldpicx;
  43. document.layers['picarea'].top = oldpicy;
  44. document.layers['picarea'].height = 20;
  45. document.layers['picarea'].visibility = "hidden";
  46. }
  47. // Capa oculta para explorer
  48. else if (document.all){
  49. document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="picarea" STYLE="z-index:200;position:absolute;left:"+picx+";top:"+picy></DIV>');
  50. }
  51. }
  52.  
  53. // Si hay capa visible, la esconde
  54. if (trigger != 0){
  55. if (document.layers){document.layers['picarea'].visibility="hide"} //Netscape
  56. if (document.all){picarea.style.visibility="hidden"}
  57. }
  58. // Define el contenido de la capa
  59. content="<a href="javascript:clearpic()" style="color:"+rahmen+""><img src="";
  60. content=content+name+"" name="pic" alt=""+alttext+"" border=1";
  61. content=content+"></A>";
  62. // Escribe el contenido de la capa para Netscape
  63. if (document.layers) {
  64. sprite=document.layers['picarea'].document;
  65. sprite.open();
  66. sprite.write(content);
  67. sprite.close();
  68. if (picx != null && auto == ''){
  69. document.layers['picarea'].left = picx;
  70. document.layers['picarea'].top = picy;
  71. }
  72. if (auto != "")
  73. {
  74. // Consigue el ancho y alto de la imagen
  75. xw=document.layers['picarea'].document.images['pic'].width
  76. yw=document.layers['picarea'].document.images['pic'].height
  77. // Centra la posicion
  78. newpicx = fx - (xw/2)
  79. newpicy = fy - (yw/2)
  80. if (picx) {newpicx=newpicx + picx}
  81. if (picy) {newpicy=newpicy + picy}
  82. // posiciona la capa
  83. document.layers['picarea'].left = newpicx;
  84. document.layers['picarea'].top = newpicy;
  85. }
  86. // muestra la capa
  87. document.layers['picarea'].visibility="show";
  88. vis=1
  89. }
  90.  
  91. // Escribe el conenido de la capa para explorer
  92. if (document.all) {
  93. document.all['picarea'].innerHTML = content;
  94. if (picx != null && auto == ''){
  95. picarea.style.top=picy
  96. picarea.style.left=picx;
  97. }
  98. if (auto != "") {
  99. // consigue dimensiones de la imagen
  100. xw=document.all['pic'].width
  101. yw=document.all['pic'].height
  102. // Centra la imagen
  103. newpicx = fx - (xw/2)
  104. newpicy = fy - (yw/2)
  105. if (picx) {newpicx=newpicx + picx}
  106. if (picy) {newpicy=newpicy + picy}
  107. // posiciona la capa
  108. picarea.style.top=newpicy;
  109. picarea.style.left=newpicx;
  110. }
  111. // Muestra la capa
  112. if (name != "dummy") {
  113. picarea.style.visibility="visible";r
  114. vis=1
  115. }
  116. }
  117. // Muestra la imagen para navegadores antiguos
  118. else if (document.layers == null && document.all == null) {self.location=name};
  119. }
  120. }
  121. // Oculta la capa al hacer click
  122. function clearpic() {
  123. vis=0
  124. if (document.layers){document.layers['picarea'].visibility="hide"};
  125. if (document.all){picarea.style.visibility="hidden"};
  126. }
  127. //-->
  128. </SCRIPT>
  129. </head>
  130. <body bgcolor="#FFFFFF" text="#000000" link="#000000" onload="initthumb()" alink="#000000" vlink="#000000" >
  131. <CENTER>
  132. <font face="arial" size=2>
  133. <BR><BR><B>Mi galeria</B><BR><BR>
  134. dopic('/tutores/images/mundo.gif',1,0,200)<br>
  135. <a href="javascript:dopic('/tutores/images/mundo.gif',0, 0,300)"><IMG SRC="/tutores/images/mundo.gif" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR>
  136. dopic('/tutores/images/mundo2.gif',1,200,100)<br>
  137. <a href="javascript:dopic('/tutores/images/mundo2.gif',0, 400, 100)"><IMG SRC="/tutores/images/mundo2.gif" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR>
  138. dopic('/tutores/images/mundo3.gif',0,20,10)<br>
  139. <a href="javascript:dopic('/tutores/images/mundo3.gif',0,20,10)"><IMG SRC="/tutores/images/mundo3.gif" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A>
  140. </FONT>
  141. </CENTER>
  142.  
  143. </body>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Divertida galeria de imagenes" href="http://www.tutores.org/codigo/1664/" target="_blank">Divertida galeria de imagenes</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
Sin definir
1 5
impresionante codigo
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.