Merci Éric pour l'inspiration (et une partie du script), j'ai maintenant un avatar magique dans le haut de ma collone de gauche :sun:
J'ai ajouté un peu de php pour le rendre "imprévisible"
Pour faire de même, vous devez avoir au moins deux images de même format, avec le même nom mais avec un chiffre différent à la fin
Dans mon exemple, j'ai 5 images nommée image-1.jpg, image-2.jpg... jusqu'à image-5.jpg (si vous n'avez pas 5 images, remplacez le 5 dans le code pour le nombre d'images que vous avez).
Ensuite, vous copiez ce code à un endroit où le php est exécuté (pour moi ça fonctionne dans la colonne de gauche de mon blog mais pas dans un billet). Pour cet exemple, il faut placer les images dans le même répertoire que le fichier (la page) où le code est placé
EDIT: J'ai essayé le nouveau truc d'Éric tout en javascrip mais cela ne semble pas fonctionner
EDIT 2: J'ai maintenant placé la 2e tentative d'Éric et cela fonctionne à merveille:
Voici le code :
12 réactions
1 De Éric - 05/01/2007, 08:13
On a pus la magie qu'on avait, ça doit être le changement climatique! ;)
Ceci dit, ça pourrait très bien se faire en Javascript directement sans avoir besoin de PHP, pour ceux qui préfèrent garder leur ressources serveur au d'autre sorte de magie! :)
<img src="image-1.jpg" onmouseover="this.src='image-'+(Math.floor(Math.random()*4)+2)+'.jpg';" onmouseout="this.src='image-1.jpg';" alt="Avatar Magique"/>
J'ai pas pris la peine de tester le code, mais en théorie, ça devrait fonctionner. En plus ça l'avantage (ou non) de changer d'image à chaque MouseOver. Des heures de plaisir! haha!
2 De Guillaume - 05/01/2007, 08:41
HAaa, j'aime bien ta solution
J'avais mis en php car je connais rien en javasxript... mais je devrais ptete étudier ça un peut... c'est vrai que c'est plus pratique pour faire des petits effets amusants
En plus, avec ta façon si je ne m'abuse, l'avatar pourra être affiché même dans un billet de blog
Avoir su, je te l'aurais demandé directement ;-)
J'essaie tout de suite avec ton code
3 De Éric - 06/01/2007, 06:15
Voilà une version testée (J'ai plus de temps à la maison qu'au bureau pour faire ce genre de petits trucs). J'ai mis des URL avec le nom de domaine simplement pour pouvoir le tester complètement, mais tu peux aisément l'enlever. Par contre il est important de laisser le chemin complet (/images/... .png) pour que les images soient accessibles de partout sur le site.
<img src = "www.cybercarnet.net/image... onmouseover = "this.src = 'www.cybercarnet.net/image... + (Math.floor(Math.random()*4)+2) + '.png';" onmouseout = "this.src = 'www.cybercarnet.net/image... alt = "Avatar Magique" />
PS: Certains accents ne semblent pas fonctionner sur ton blogue. Probablement des fichiers PHP sauvegarder en ISO-8859-1 plutot qu'en UTF-8.
4 De Éric - 06/01/2007, 06:20
Oh les URL de mon commentaire précédant on été tronqués. Alors voici une version sans le hostname :
<img src = "/images/guillaume-goyette-1.png" onmouseover = "this.src = '/images/guillaume-goyette-' + (Math.floor(Math.random()*4)+2) + '.png';" onmouseout = "this.src = '/images/guillaume-goyette-1.png';" alt = "Avatar Magique" />
5 De Guillaume - 06/01/2007, 12:22
wow Éric, merci d'avoir pris du temps pour m'aider... moi aussi normalement je fait ce genre de truc à la maison mais hier, j'était le seul courrageux à m'être pointé au laboratoire... hum ça c'est pas très motivant pour du travail ardu ;-)
Je vais tester ton code dès que j'ai une minute, probablement demain, là je suis dans la popotte pour un souper entre amis !!
6 De Guillaume - 07/01/2007, 11:46
Merci Éric
Ça marche numéro 1 :-)
7 De Stagueve - 09/01/2007, 15:07
Excellent cher Guillaume !!!
(le petit scientifique te va à merveille ^^)
P.s: Merci pour tes commentaires sur WF et BPP !!!
@+
8 De Guillaume - 09/01/2007, 15:53
Merci Stagueve
héhé, le petit scientifique est un dessin fait exiprès pour moi par Lostinbritanny : www.lostinbrittany.org/do...
9 De nick - 16/03/2007, 20:44
hi...good site.
10 De john - 22/04/2007, 11:49
merci pour les infos!
11 De kantoormeubilair - 08/02/2009, 09:19
Salut Guillaume, c'est vraiment un très bien truc. Je l'ai essayé moi même et ça marche très bien! Merci beaucoup!
12 De Binnenzonwering Raamdecoratie
- 13/08/2011, 13:26
SUpercool. Tu es apparament un grand expert web!