Effet de fondu sur une visionneuse d'image

**a-tchittat** · 21/09/2010, 16h22

Bonjour tous,

J'ai un script en javascript qui me permet de visionner des images.
J'aimerai intégrer dans ce script un effet de fondu (transition entre deux image) ... J'ai regardé sur le net et j'ai vu qu'étaient utilisées les fonctions setOpacity, fade in, fade out ... mais je ne connais pas assez javascript pour modifié mon cade.

Le voici :

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
<script language="JavaScript" type="text/JavaScript">
<!--
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}
var nom = new objet ("photo1.jpg", "photo2.jpg", "photo3.jpg");
var numero = 1;
function changer() {
document.image.src = "photo/"+nom[numero];
numero += 1;
if (numero == nom.length + 1) numero = 1;
setTimeout("changer()", 3000);
}
 
//-->
</script>

et je mets dans la balise "body" : <body onLoad="changer();>

et après, je mets ma première image dans ma page : <img src="photo/photo1.jpg" width="750" height="290" name="image">

Si quelqu'un peut m'aider, ce serait vraiment vraiment formidable !!

Merci à tous pour votre attention,

bonne journée !

**themoye** · 22/09/2010, 17h05

Salut salut !

Le plus simple serait de passer par un framework javascript (tel jQuery, qui est très bon pour ce genre d'effets).

Sinon tu peux le faire à la main, en changeant l'opacité de ton image (ou de la div conteneur) au cours du temps, dans ton timer (enfin plutôt ici un autre timer).
Mais étrangement, j'ai remarqué que le "manuscriptus" est moins fluide que les effets obtenus via framework, je ne sais pas comment ils font :o

Concrètement, au moment de charger la nouvelle image, tu la charges avec une opacité de 0, et tu appelles un timer qui va incrémenter cette opacité.
Tu peux aussi faire l'inverse sur l'ancienne image.
Décrémenter l'opacité avant d'appeler l'image suivante.

Sachant que la syntaxe pour modifier un attribut CSS dans Javascript est de ce genre :

Code :

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

1
2
 
document.getElementById('MonID').style.Propriété_CSS = "nouvelle valeur";

Voilou

**Bovino** · 22/09/2010, 20h22

Envoyé par a-tchittat

J'ai regardé sur le net

Apparemment pas au bon endroit...

[SRC] Fondu enchainé

Effet de fondu sur une visionneuse d'image

JavaScript

Discussions similaires

Partager

Partager