setInterval - immagini errato

**xxstykkyxx** · 26-10-2011, 16:24

Buongiorno,

Sto cercando di fare un algoritmo che scorra due immagini in base a un setInterval.
Praticamente voglio che le due immagini dopo due secondi vengano invertite, mettendo l'immagine piccola in quella grande e viceversa.

HTML:

codice:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stile.css">
		<title>immagini svoltate</title>
		<script>
			var immagine=new Array("snoopy1.jpg","snoopy2.jpg");

			function scorri () {
				setTimeout ("img1()",2000);
				setTimeout ("img2()",2000);
			}
			function img1 () {
				document.images[0].src=immagine[0];
				document.images[1].src=immagine[1];
			}
			function img2 () {
				document.images[0].src=immagine[1];
				document.images[1].src=immagine[0];
			}
		</script>
	</head>
		<body>
			<p id="sx">
				[img]snoopy.jpg[/img]
			</p>
			<p id="dx">
				[img]snoopy.jpg[/img]
			</p>
			<script>
					var tmp=setInterval ("scorri()",3000);
			</script>
		</body>
	</html>

CSS:

codice:

#sx {
		margin-top=200px;
		margin-left=15px;
		border-style=outset;
		border-width=3px;
		height=150;
		width=150;
		opacity:0.6;
		filter:alpha(opacity=40);
		
		float=left;
}
#dx {
		margin-top=30px;
		margin-left=200px;
		border-style=inset;
		border-width=3px;
		height=600;
		width=600;
		opacity:1;
		filter:alpha(opacity=100);
}
#img1 {
		height=150;
		width=150;
}
#img2 {
    height=600;
		width=600;
}

**xxstykkyxx** · 26-10-2011, 18:05

Corretto da me, a chi può essere utile.

Le immagini devono essere implementate ovviamente.

MAIN:

codice:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stile.css">
		<title>immagini svoltate</title>
		<script>
			var immagine=new Array("snoopy1.jpg","snoopy2.jpg");
									
			function inverti () {
				document.images[0].src=immagine[1];
				document.images[1].src=immagine[0];
				setTimeout ("ritorna()",1000);
			}
			function ritorna () {
				document.images[0].src=immagine[0];
				document.images[1].src=immagine[1];
			}
		</script>
	</head>
	<body>
		<p id="sx">
			[img]snoopy1.jpg[/img]
		</p>
		<p id="dx">
			[img]snoopy2.jpg[/img]
		</p>
		<script>
			var tmp=setInterval ("inverti()",2000);
		</script>
	</body>
</html>

CSS:

codice:

#sx {
	margin-top=400px;
	margin-left=15px;
	border-style=outset;
	border-width=3px;
	height=150;
	width=150;
	opacity=1;
	filter:alpha(opacity=20);
		
	float=left;
}
#dx {
	margin-top=30px;
	margin-left=200px;
	border-style=inset;
	border-width=3px;
	height=600;
	width=600;
	opacity=1;
	filter:alpha(opacity=100);
}
#img1 {
	height=150;
	width=150;
}
#img2 {
	height=600;
	width=600;
}

**xxstykkyxx** · 27-10-2011, 12:38

Correggo il .css, ho commesso errori ripetuti.

codice:

#sx {
	margin-top: 400px;
	margin-left: 15px;
	border-style: outset;
	border-width: 3px;
	height: 150px;
	width: 150px;
	opacity: 1;
	filter: alpha(opacity=20);
		
	float: left;
}
#dx {
	margin-top: 30px;
	margin-left: 200px;
	border-style: inset;
	border-width: 3px;
	height: 600px;
	width: 600px;
	opacity: 1;
	filter: alpha(opacity=100);
}
#img1 {
	height: 150px;
	width: 150px;

#img2 {
	height: 600px;
	width: 600px;
}

Discussione: setInterval - immagini errato

Strumenti discussione

Ricerca discussione

Visualizza

setInterval - immagini errato

soluzione :D

Re: soluzione :D

Permessi di invio