Ett antal bilder ska fade:as.

9 svar · 373 visningar · startad av lindstone 31 maj 2004

lindstoneMedlem sedan maj 200410 inlägg

31 maj 2004 23:52#1

Hej!
Jag håller på med en sida där ett antal bilder ska växla mellan 2 bilder vardera (alltså fade:as och inte bara bytas).
Jag hittade det här scriptet: http://www.jojoxx.net/jscript/archive/show.asp?id=85
, men jag vet inte hur jag ska skriva om det är 12 olika bilder som alla ska hålla på och fade:a fram och tillbaka? Har sökt i en evighet på nätet och vore så tacksam för hjälp. obs! är inte så dum som jag låter. Men jag försökte att klistra in koden flera gånger men då var det ändå bara den första som fungerade och nu står det still i lilla hjärnan.

Nexus86Medlem sedan okt. 20023 030 inlägg

1 juni 2004 00:24#2

[b]<!-- Byt ut alla bild(n).jpg mot de riktiga bilderna. -->[/b]

<div style="height:209px;width:192px;">
<div id="fadea" style="position:absolute;visibility:hidden;"><img [b]src="bild1.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadeb" style="position:absolute;visibility:hidden;"><img [b]src="bild2.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadec" style="position:absolute;visibility:hidden;"><img [b]src="bild3.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="faded" style="position:absolute;visibility:hidden;"><img [b]src="bild4.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadee" style="position:absolute;visibility:hidden;"><img [b]src="bild5.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadef" style="position:absolute;visibility:hidden;"><img [b]src="bild6.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadeg" style="position:absolute;visibility:hidden;"><img [b]src="bild7.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadeh" style="position:absolute;visibility:hidden;"><img [b]src="bild8.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadei" style="position:absolute;visibility:hidden;"><img [b]src="bild9.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadej" style="position:absolute;visibility:hidden;"><img [b]src="bild10.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadek" style="position:absolute;visibility:hidden;"><img [b]src="bild11.jpg"[/b] width="192" height="209" alt="Fade"/></div>
<div id="fadel" style="position:absolute;visibility:hidden;"><img [b]src="bild12.jpg"[/b] width="192" height="209" alt="Fade"/></div>
</div>

<script type="text/javascript">
/*  The code contained in this  file is copyrighted by [url]www.jojoxx.net[/url]
The file may be used for none commercial applications and distributed
as long as these lines remain intact.  The file or part of it may not
be sold  or  included  in any  other commercial  application  without
agreement from the author. If you have questions or comments, contact
the author at [url]http://www.jojoxx.net[/url]

© Copyright - [url]www.jojoxx.net[/url] - 2004                                */

var divs=["fadea","fadeb","fadec","faded","fadee","fadef","fadeg","fadeh","fadei","fadej","fadek","fadel"];
function fade(n,diff,opacity){
	id=divs[n];
	opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
	if(document.getElementById&&document.all){
		document.getElementById(id).style.filter="alpha(opacity="+opacity+")";
	}else if(document.getElementById&&!document.all){
		document.getElementById(id).style.MozOpacity = opacity/100;
	}
	document.getElementById(id).style.visibility="visible";
	if(opacity>=100){
		setTimeout("fade("+n+",-"+diff+","+opacity+");",30);
		nn=(n==divs.length-1)?0:n+1;
		setTimeout("fade("+nn+","+diff+");",30);
	} else if(opacity>0){
		setTimeout("fade("+n+","+diff+","+opacity+");",30);
	}
}
fade(0,1);
</script>

r/ Förresten, välkommen till wF! :bire

nitro2k01Medlem sedan aug. 20039 342 inlägg

1 juni 2004 13:54#3

http://www.webforum.nu/showthread.php?s=&postid=836245#post836245

lindstoneMedlem sedan maj 200410 inlägg

1 juni 2004 19:15#4

Oj så här var det....

Tack så hemskt mycket för hjälpen men det var inte riktigt så jag menade...
Jag vill alltså ha 12 bilder som alla fadar in och ut två olika bilder vardera samtidigt (!).
12 * 2 bilder.
Bilderna ska nämligenalla fade:a mellan svartvit och färg och det är 12 olika. Jag har förberett 24 bilder till detta- gjort hälften i svartvit och hälften i färg. Oj vad svårt det var att förklara.

bossseMedlem sedan juni 2003772 inlägg

1 juni 2004 20:59#5

Kan detta va nåt tro?
Har länkat till lite bilder på webben, så du ser direkt hur det funkar!

<HTML>
<HEAD>
<style type=text/css>
body {background-color:green; font-family:Arial,Verdana,sans-serif; font-size:18px;color:yellow}
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<div id="fade1" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src= [url]http://www.iconbazaar.com/animals/fish/amberjack_1a.gif[/url] width=200 height=200>&nbsp &nbsp &nbsp<img src= [url]http://w1.470.telia.com/~u47008275/natur/bjork_sjo.jpg[/url]></div>
<div id="fade2" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src=http://www.iconbazaar.com/animals/amphibians/bullfrog2_1b.gif width=200 height=200>&nbsp &nbsp &nbsp<img src= [url]http://w1.470.telia.com/~u47008275/natur/helgahavet.jpg[/url]></div>
<div id="fade3" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src=http://www.iconbazaar.com/animals/birds/anhinga_1a.gif width=200 height=200>&nbsp &nbsp &nbsp<img src= [url]http://w1.470.telia.com/~u47008275/natur/ek.jpg[/url]></div>
<div id="fade4" style="position:absolute;top:100px;left:100px;visibility:hidden;"><img src=http://www.iconbazaar.com/animals/mammals/hoofed/horses/muybridge_a.gif width=200 height=200>&nbsp &nbsp &nbsp<img src= [url]http://w1.470.telia.com/~u47008275/veteraner/gangstercitra.jpg[/url]</div>
<script type="text/javascript">
var divs=["fade1","fade2","fade3","fade4"];
function fade(n,diff,opacity)
{	id=divs[n];opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
	if(document.getElementById&&document.all)
	{document.getElementById(id).style.filter="alpha(opacity="+opacity+")";	}
	else if(document.getElementById&&!document.all)
	{document.getElementById(id).style.MozOpacity = opacity/100;}
	document.getElementById(id).style.visibility="visible";
	if(opacity>=100)
	{setTimeout("fade("+n+",-"+diff+","+opacity+");",1);nn=(n==divs.length-1)?0:n+1;
	setTimeout("fade("+nn+","+diff+");",1);}
	else if(opacity>0)
	{setTimeout("fade("+n+","+diff+","+opacity+");",1);}
}
fade(0,3);
</script>
</BODY>
</HTML>

lindstoneMedlem sedan maj 200410 inlägg

1 juni 2004 21:29#6

Ååh det verkar vara rätt

Tack så jättemycket! Vad snällt.

Går det att få fade-ningen att gå saktare?

/Malin

CheguelinMedlem sedan juli 2003303 inlägg

1 juni 2004 22:05#7

Jag var uppenbarligen helt fel ute, sorry

lindstoneMedlem sedan maj 200410 inlägg

2 juni 2004 07:43#8

Helt fel ute? Du har inte skrivit något innan (?)

bossseMedlem sedan juni 2003772 inlägg

2 juni 2004 10:31#9

Ändra bara fade(0,3); till fade(0,1); så går det saktare!

Har inte testat om det även går med två decimaler!

lindstoneMedlem sedan maj 200410 inlägg

6 juni 2004 17:21#10

Åh tack så mycket!