La méga mise à jour du jour, la meilleure jusqu’à maintenant à mon avis!
J’ai rajouté deux petits buttons en haut à droite en dessous de l’image, celui-ci: 
et celui là: 
. Je vous laisse essayer par vous-même. C’est beau non?
J’en ai vu des blogs cool mais là, je n’aime pas me vanter mais c’est bien foutu ce truc quand même. J’ai fait ça avec les fonctions de Scriptaculous et c’est déconcertant de facilité, il y a trois lignes de code javascript pour les effets visuels et dix lignes pour l’AJAX (l’image qui se met à jour est téléchargée via AJAX).
Pfffiouu. J’ai du mal à m’en remettre là. C’est beau. Testé sur Firefox et Internet Explorer :cool:.
Aller un petit gecko por la route:
Un Gecko c’est une sorte de petit lezard sauf que c’est plus sympa, ça n’a pas peur et ça ne s’enfuie pas devant vous.
J’en avais jamais vu dans la nature avant…
Comme ça:
dans le div des bouttons tu fais un onClick=”ChangePic();”
masthead est mon div d’en-tete qui contient mon image.
ChangePic lance un effet de Fading, la fonction ChangePicAjax est exécutée juste après qu’il ait terminé.
ChangePicAjax demande un nouvelle image au server, j’ai un petit fichier php qui me fait ça, randomheader2.php. Le ?iesucks= avec un timestamp c’est à cause de ie qui cache les pages si l’URL est exactement la même.
Finalement dans le callback d’ajax (AjaxCallBack), je change le contenu de l’en-tête par ma nouvelle image et démarre l’effet inverse pour refaire apparaitre l’image.
var ajax;
function AjaxCallBack( req )
{
$('masthead').innerHTML = req.responseText;
new Effect.Opacity('masthead', {duration:2.5, from:0, to:1, queue:'end'});
}
function ChangePic()
{
new Effect.Opacity('masthead', {duration:1, from:0.6, to: 0, afterFinish:ChangePicAjax});
}
function ChangePicAjax()
{
var ajax = new Ajax.Updater(
'dummy',
'/randomheader2.php?iesucks=' + new Date().getTime(), // URL
{method:'get', onComplete: AjaxCallBack }
);
}