Tema: Crear Presentacion de imagenes al pasar el puntero del mouse
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/12/2013, 08:40
andresjsp
 
Fecha de Ingreso: diciembre-2013
Ubicación: Barquisimeto
Mensajes: 3
Antigüedad: 10 años, 4 meses
Puntos: 0
Pregunta Crear Presentacion de imagenes al pasar el puntero del mouse
Hola a todos es mi primer Tema y espero me puedan ayudar con el siguiente problema!!

Bueno lo que quiero es que a través de una imagen me haga una presentación de varias imágenes al pasar el puntero del ratón a dicha imagen, ya eso lo hace el código que les voy a mostrar a continuación. El problema es que quiero que me haga dicha presentación mientras este el punteo del mouse en la imagen, luego de haberlo quitado se detenga la presentación y aparezca nuevamente la imagen del principio. Espero que hayan entendido mi pregunta y me puedan prestar su valiosa ayuda. Gracias de Antemano y que pasen Excelente día.

Este es el código HTML y javascript de la presentación:
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <title>Presentación de Imágenes</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script language="javascript">
  6. /*****************************************************************************
  7. Presentación de Imágenes (SlideShow) por Tunait!
  8. Actualizado el 28/12/2003
  9. Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
  10.  
  11. http://javascript.tunait.com
  12. [email protected] 
  13. ******************************************************************************/
  14. var segundos = 4 //cada cuantos segundos cambia la imagen
  15. var dire = "galeria" //directorio o ruta donde están las imágenes
  16.  
  17. var imagenes=new Array()
  18. imagenes[0]="229467_2015227015413_6175675_n.jpg"
  19. imagenes[1]="230055_1972912930084_6174869_a.jpg"
  20. imagenes[2]="292209_10150846306263597_885089948_a.jpg"
  21. imagenes[3]="310303_2389259805999_1474653975_a.jpg"
  22. imagenes[4]="312143_10150402945303153_638385573_a.jpg"
  23.  
  24. if(dire != "" && dire.charAt(dire.length-1) != "/")
  25. {dire = dire + "/"}
  26.  
  27. var preImagenes = new Array()
  28. for (pre = 0; pre < imagenes.length; pre++){
  29.     preImagenes[pre] = new Image()
  30.     preImagenes[pre].src = dire + imagenes[pre]
  31.     }
  32. cont=0
  33. function presImagen(){
  34. document.foto.src= dire + imagenes[cont]
  35. subeOpacidad()
  36. if (cont < imagenes.length-1)
  37.     {cont ++}
  38. else
  39.     {cont=0}
  40. tiempo=window.setTimeout('bajaOpacidad()',segundos*200)
  41. }
  42. var iex = navigator.appName=="Microsoft Internet Explorer" ? true : false;
  43. var fi = iex?'filters.alpha.opacity':'style.opacity'
  44. var opa = iex ? 100 : 1;
  45. function bajaOpacidad(){
  46. eval(opa)
  47. if(opa >= 0){
  48.     cambia()
  49.     opa -= iex?10:0.1;
  50.     setTimeout('bajaOpacidad()',50)
  51.     }
  52. else{presImagen()}
  53. }
  54.  
  55. function subeOpacidad(){
  56. opaci = iex?100:1;
  57. if(opa <= opaci){
  58.     cambia()
  59.     opa += iex?10: 0.1;
  60.     setTimeout('subeOpacidad()',10)
  61.     }
  62. }
  63. function cambia(){
  64. eval('document.foto.' + fi + ' = opa')
  65. }
  66. var tiempo
  67. function inicio(){
  68. clearTimeout(tiempo)
  69. bajaOpacidad()
  70. }
  71.  
  72. </script>
  73. <style type="text/css">
  74. #foto {
  75. filter: alpha(opacity=100)
  76. }
  77. </style>
  78. </head>
  79.  
  80. <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" marginwidth="0" >
  81. <div align="center"><a href="" onMouseOut="fin()"><img src="galeria/310303_2389259805999_1474653975_a.jpg" width="200" height="200" name="foto" id="foto" onMouseOver="inicio()"></a> 
  82. </div>
  83. </body>
  84. </html>
Última edición por andresjsp; 12/12/2013 a las 10:23