animation

[richere]

bonjour,

j'aimerais créer une petite animation avec une suite d'images qui change à chaque secondes,
est-ce que vous connaissez un code pour réaliser une petite animation de huit images?
que je puisse ensuite exposer sur mon forum.

merci d'avance

[BAR4K]

Salut ,

Parle-tu d'un truc du genre le widget "themes du mois" qu'il y a dans la colonne de gauche sur FA ?

[richere]

oui, c'est exactement ça, mais un peu plus simple
parce que je veux pas avoir les "a href" et "target blank"


j'ai trouvée cela sur le code source,,, je pense que j'y suis


<SCRIPT language=javascript>
var counts = 3; ici je vais changer pour 1
img1 = new Image();
img1.src = 'http://hitskin.com/themes/16/31/45/preview.jpg'; ici je vais mettre une à une, l'adresse de mes images à animer
img2 = new Image();
img2.src = 'http://hitskin.com/themes/15/00/01/preview.jpg';
img3 = new Image();
img3.src = 'http://hitskin.com/themes/14/43/29/preview.jpg';
Comme j'en ai Huit....je vais rallonger la liste

var smallImg = new Array();
smallImg[0] = 'https://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
smallImg[1] = 'https://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
smallImg[2] = 'https://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';

url1 = 'http://fr.hitskin.com/?afolder=theme&id=163145'; (Ça,,, j'en veux pas)
url2 = 'http://fr.hitskin.com/?afolder=theme&id=150001';
url3 = 'http://fr.hitskin.com/?afolder=theme&id=144329';

alt1 = new Image(); (ça,,, je pense pas en avoir de besoin, ce serait inutile dans mon cas)
alt1.alt = 'Sorciere d halloween';
alt2 = new Image();
alt2.alt = 'Animal Crossing Halloween';
alt3 = new Image();
alt3.alt = 'automne halloween';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";
} else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}

for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
j'avoue que les reste du code, je ne sais trop à quoi çela correspond

quelqu'un peut me donner un coup de pouce ?

merci à vous!

[kelkun89]

Salut si tu veux je peux te passer un code en animation " CSS " sans javasript par contre pour tes image il va falloir les heberger puis les rallier en
scr = " ton lien " tien moi au courant si sa te dit

[richere]

Bonjour Kelkun,

je suis pas sûr d'avoir bien compris si tu veux le faire pour moi, ou si tu me donne le code pour le faire moi-même,

je pense que c'est quelque chose d'assez simple à réaliser,
et j'aimerais beaucoup apprendre à le faire moi-même,,

alors si ton code, me donne les indication néccessaire à la réalisation d'une animation, je suis toute oui! (placer une suite d'image, mettre une seconde entre chaque)
et j'avais pensé que c'était possible de le mettre en Widget comme ici sur Forumactif (thème du mois halloween)

depuis hier, j'essaie de comprendre l'animation avec photoshop, et je dois faire 16 image en tout, elle ne sont pas encore fini,,,

merci

[kelkun89]

Ha non mon codage c'est une animation en css avec X image tu peu faire un diaporama ou des image aparaitre disparaitre chacune leur tout apres a toi de voir mes il va falloir que tu le modifie pour que sa aille

[richere]

ok, ben, envoi!
je vais essayé de tatonner ça en y insérrant mes images à la place des tiennes, dans la CSS, et je te dirai si ça me va

ton code, il est à mettre dans la CSS, et c'Est tout?
je suis un peu débutante avec ça , mais je me débrouille pas pire sur le tas,

merci à toi!

[Invité]

Bonjour,

Si vous voulez un truc comme thème du mois, allez voir là: ici Après ont le modifie comme vous voulez ^^.

Bonne soirée et au revoir!

[richere]

ha ben super ton intervention Sasuke315,,,

j'ai du pain sur la planche maintenant!!!

je vais prendre le temps de bien assimiler, digérer, tester,
et je te reviens là dessus dans quelques ,,,jours..lol

merci beaucoup!

[kelkun89]

Oups désolé j'ai zape de te répondre donc tu a ce que tu voulais a ce que je voit.
Si tu a besoin d'un anim hésite pas

[richere]

merci kelkun, c'est très gentil,
on s'en reparle un autre tantôt!

[richere]

bon me revoilà comme prevue, pour donner mon compte rendue...

j'ai realisée que l'animation à 15 images que je voulais faire,
serait trop lourde pour le fourm, et de ce fait, rallentirait le rendement

en fin de compte, j'ai opter pour aller lire les instructions de photoshop, et j'ai finalement créer l'animation, réduit en format gif.