Forum Clubic

[js] img fader - mise en forme d'images

Logiciel Programmation
#1

Mesdames, Messieurs, bonjour…

Dans la gallerie de mon site, les images vont toujours par deux, un peux comme un avant/après.
je souhaiterais les affcher avec une petite animation un peu comme sur cette page --> http://www.monstermonster.co.uk/Feature.aspx?id=10446

le seul problème, c’est que je ne connais rien en JavaScript, donc je voudrais savoir si quelqu’un d’entre vous pouvais me dire comment faire, ou au pire me faire une démo… :ange:

Merci d’avance,

Cordialeent, ISZ.

#2

Le code source de la fonction se trouve ici (c’était dans le source de ton lien) : code javascript
C’est sous license Creative Commons, donc tu peux t’en servirsi tu cites l’auteur, et la license, donc si tu laisse l’entête c’est bon.

Après tu peux t’en servir comme ca:


var fader =  new ImgFader("id-image1", "id-image2", duree);
fader.start();

Où tes deux images ont les ids que tu appelles, et durée est la durée de l’animation.

Bon courage :slight_smile:

#3

Et c’est compatible avec une variable php ?

[edit] j’ai fait des essais et j’arrive pas à utiliser ça :nexath
y’aurait moyen de me faire voir sur une page html toute simple, avec deux images au hasard ? :ane:

merci d’avance…

ISZ.

#4 

<html?gt;
<head>
<script type="text/javascript" src="http://www.monstermonster.co.uk/javascripts/img-fader.js"></script>
<script type="text/javascript">
<!--
var fader;
onload = function () {
	fader =new ImgFader("im1", "im2", 1);
	fader.start();
};
//-->
</script>
</head>
<body>
<div id="fader" onclick="fader.start();">
	<img width="200" height="200" id="im1" style="position:absolute;left:0px;top:0px;" src="http://kde.org/stuff/clipart/klogo-crystal-800x800.png"/>
	<img width="200" height="200" id="im2" style="position:absolute;left:0px;top:0px;" src="http://kde.org/stuff/clipart/klogo-kdeclassic-800x800.png">
</div>
</body>
</html?gt;

Voila le code, télécharge le script js sur ton site et inclus celui-la et pas celui de monstermonster.

#5

arf ça marche jte remercie bien fort :wink:

#6

De rien, y a pas de quoi :slight_smile: