>> Como paro esta funcion!! setTimeout hace el loco !! XD

Shagraarath · #1 (**permalink**) 11/11/2008, 06:33

Buenas, tengo este codigo que me hace un rollover de 3 imagenes.
El caso es que cuando pongo el raton encima empieza el rollover pero cuando lo saco de la imagen no para el rollover y quiero que pare.

Vereis en el codigo que hay una funcion llamada "final" que la he dejado vacia y la llamo con el mouseout en la imagen.

Aqui os dejo el codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
/*****************************************************************************
Presentación de Imágenes2 (SlideShow) por Tunait! 6/agosto/03
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 = 1 //cada cuantos segundos cambia la imagen
var dire = "fotos" //directorio o ruta donde están las imágenes

var imagenes=new Array()
	imagenes[0]="1.jpg"
	imagenes[1]="2.jpg"
	imagenes[2]="3.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*1000)
	
}
var iex = navigator.appName=="Microsoft Internet Explorer" ? true : false;
var fi = iex?'filters.alpha.opacity':'style.MozOpacity'
var opa = iex ? 100 : 1;
function bajaOpacidad(){
	opa = 0
	cambia()
	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(){
	tiempo=window.setTimeout('bajaOpacidad()',segundos*1000)
	bajaOpacidad()
}
function final(){

}
</script>
</head>

<body>
<img src="1.jpg" name="foto" id="foto" alt="alena y juan" onmouseover="inicio()" onmouseout="final()" width="200" height="200">
</body>
</html>

Haver si me podeis ayudar :S

Panino5001 · #2 (**permalink**) 11/11/2008, 07:01

Probá con:

Código PHP:

  onmouseover="clearTimeout(tiempo)"

Shagraarath · #3 (**permalink**) 12/11/2008, 03:06

Lo he pusto pero con "mouseout":

Código HTML:

onmouseout="clearTimeout(tiempo)

Ya que quiero que pare cuando el raton este fuera de la imagen.
Pero no funciona :S no para la transicion :(

Aqui os pongo el archivo 100% funcional con 3 imagenes y el archivo .html
son 270Kb.

http://rapidshare.com/files/162996534/Rollover.rar.html

Shagraarath · #4 (**permalink**) 12/11/2008, 03:30

ya esta solucionado ^^

Fui investigando mas y lo encontre :P

lo posteo en un nuevo tema ;)

gracias !! =DDD