Discussion :

[Saiyan]

Bonjour,

J'utilise un script permettant de définir plusieurs images et liens, les images défilent avec un effet de fondu, et en cliquant dessus on arrive sur la page de l'article.

Seul problème, il utilise une propriété pour effectuer le fondu (blendTrans) qui n'est pas reconnue par Firefox, ainsi, le fondu se fait bien sur IE mais Firefox se "contente" d'afficher les images les unes après les autres...

Je sais qu'il est possible d'obtenir cet effet de fondu sous Firefox, je l'ai déjà vu, mais comment ? Je ne trouve pas la bonne solution, après en avoir essayé plusieurs !

Voici le code :

Dans le head :

<script type="text/javascript">
// Intervalle de temps entre chaque image
var intervalle=5000;
// Images et liens associes
var une=new Array
(
"Image1",
"Image2",
"Image3");
var liens=new Array
(
"Lien1",
"Lien2",
"Lien3");
var newwindow=0;
var imageholder=new Array();
var ie=document.all;
for (i=0;i<une.length;i++)
{
imageholder[i]=new Image();
imageholder[i].src=une[i];
}
function lien()
{
if (newwindow)
window.open(liens[whichlink])
else
window.location=liens[whichlink]
}
</script>

Et dans le body :

<a href="javascript:lien()"><img src="logo_load.jpg" name="slide" width="550" height="150" alt="" style="filter:blendTrans(duration=1)" /></a>
<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<une.length-1)? whichimage+1 : 0
setTimeout("slideit()",intervalle+blenddelay)
}
slideit()
//-->
</script>

Si quelqu'un a déjà utilisé quelque chose du genre, peut être pourra-t-il m'aider ?

Merci d'avance !

[ePoX]

Salut,

en titillant un peu google j'ai trouvé cette page web http://www.brainerror.net/scripts_js_blendtrans.php

Et dessus il y à juste tout ce qu'il te faut.

Si vraiment tu à la flemme vla le script qu'ils ont créé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;
 
	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}
 
//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}
 
function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}
 
function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
 
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
 
	//make image transparent
	changeOpac(0, imageid);
 
	//make new image
	document.getElementById(imageid).src = imagefile;
 
	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}
 
function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
 
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}
 
	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}

bye

[Saiyan]

Mais tout ça ne fait rien automatiquement, et si je veux un fondu, je suis obligé de mettre un lien pour chaque image, mais je voudrais que ça tourne automatiquement

Edit

Je pense avoir trouvé !