Crear Presentacion de imagenes al pasar el puntero del mouse

andresjsp · #1 (**permalink**) 12/12/2013, 08:40

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<html>
<head>
<title>Presentación de Imágenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
/*****************************************************************************
Presentación de Imágenes (SlideShow) por Tunait!
Actualizado el 28/12/2003
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.
 
http://javascript.tunait.com
[email protected] 
******************************************************************************/
var segundos = 4 //cada cuantos segundos cambia la imagen
var dire = "galeria" //directorio o ruta donde están las imágenes
 
var imagenes=new Array()
imagenes[0]="229467_2015227015413_6175675_n.jpg"
imagenes[1]="230055_1972912930084_6174869_a.jpg"
imagenes[2]="292209_10150846306263597_885089948_a.jpg"
imagenes[3]="310303_2389259805999_1474653975_a.jpg"
imagenes[4]="312143_10150402945303153_638385573_a.jpg"
 
if(dire != "" && dire.charAt(dire.length-1) != "/")
{dire = dire + "/"}
 
var preImagenes = new Array()
for (pre = 0; pre < imagenes.length; pre++){
    preImagenes[pre] = new Image()
    preImagenes[pre].src = dire + imagenes[pre]
    }
cont=0
function presImagen(){
document.foto.src= dire + imagenes[cont]
subeOpacidad()
if (cont < imagenes.length-1)
    {cont ++}
else
    {cont=0}
tiempo=window.setTimeout('bajaOpacidad()',segundos*200)
}
var iex = navigator.appName=="Microsoft Internet Explorer" ? true : false;
var fi = iex?'filters.alpha.opacity':'style.opacity'
var opa = iex ? 100 : 1;
function bajaOpacidad(){
eval(opa)
if(opa >= 0){
    cambia()
    opa -= iex?10:0.1;
    setTimeout('bajaOpacidad()',50)
    }
else{presImagen()}
}
 
function subeOpacidad(){
opaci = iex?100:1;
if(opa <= opaci){
    cambia()
    opa += iex?10: 0.1;
    setTimeout('subeOpacidad()',10)
    }
}
function cambia(){
eval('document.foto.' + fi + ' = opa')
}
var tiempo
function inicio(){
clearTimeout(tiempo)
bajaOpacidad()
}
 
</script>
<style type="text/css">
#foto {
filter: alpha(opacity=100)
}
</style>
</head>
 
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" marginwidth="0" >
<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> 
</div>
</body>
</html>