Bonjour,

J'ai encore une petite question. Je m'initie petit à petit au javascript. Pour le moment, je décortique un code qui permet à mon image de changer au passage de la souris. Mais j'aimerais créer une transition dynamique pour ce changement. Par exemple, je voudrais que l'image "glisse" pour laisser place au texte et cela au passage de la souris. Je me disais qu'il suffisait de modifier le code de base pour changer l'image au passage de la souris mais je ne trouve pas comment définir cette transition. Je ne suis pas très douée, j'espère que je m'exprime assez clairement x)

Mon code :

Code:

<a href="http://reve-inverness.forumactif.com/u1?tid=28219d465bd952694d8471d788faba87" class="postlink">
<img src="http://img11.hostingpics.net/pics/943918accinverness.png" alt="Fondateur" onmouseover="javascript:this.src='http://img11.hostingpics.net/pics/191678fondateur.png';" onmouseout="javascript:this.src='http://img11.hostingpics.net/pics/943918accinverness.png';" />
</a>

Bref, je voudrais savoir comment réaliser un tel effet. Je voudrais savoir également s'il est possible de définir cet effet de transition des images dans le css histoire de pouvoir l'appliquer où l'on souhaite en posant simplement la bonne division =D

L'adresse du forum, au cas où : http://reve-inverness.forumactif.com/

Bonjour Abysse

Et bien, un gros morceau que celui auquel tu t'attaque là !
En fait, pour réaliser ton effet, tu as 2 options :

1. créer les 2 blocs l'un en dessous de l'autre et décaler le premier sur le côté pour dévoiler le second au survol en CSS. Avec les transitions tu peux obtenir très facilement et rapidement le résultat désiré. Après il faut juger de la compatibilité avec les vieilles versions d'Internet Explorer (IE 8 et moins)...
   
   
2. gérer tout ceci en javascript, sachant qu'on dispose de la librairie jQuery sur ForumActif, qui te permet de faire des choses très puissantes sans te soucier de la compatibilité (mais c'est un peu plus technique quand on connaît pas)

A toi de me dire sur quoi tu préfère partir donc...

En revanche, je t'annonce d'ores et déjà que ce qui vaut pour le CSS (à savoir ne pas mettre de style="..." dans le HTML, séparer le fond de la forme) vaut également pour le JS : on sépare l'effet de l'élément et on n'utilise jamais les obsolètes onmouseover="javascript:..." & cie. à moins que ce soit un cas de force majeur extrêmement justifié (si tu n'es que membre du forum et que tu ne peux pas te permettre de créer des scripts dans les messages).

Oh j'ignorais que je n'avais pas besoin d'ajouter ces parties, merci =)

Pour la partie CSS, ca ressemblerait à l'effet sur les avatars de css, celui qui fait apparaître les infos derrière, c'est cela ? Ma foi, c'est certainement une solution que j'arriverais mieux à maîtriser étant vraiment très débutante en JS. Je pense qu'il me faudrait plus de temps pour maîtriser l'autre proposition que tu me fais. Dans l'idéal, et pour le moment, donc, je pense qu'on peut se pencher sur la première solution en CSS =)

En fait, il suffirait que je définisse une transition dans le css, genre l'image qui se décale de xxx pixels sur la droite, par exemple ? J'avais bien essayé mais le résultat n'avait pas été concluant, j'avais du louper quelque chose d'essentiel.

C'est précisément un code à copier coller que je suis en train de préparer x) J'avais également fait un tutoriel live à ce sujet dans une demande d'aide, mais va savoir où x_x

Il n'y a pas un tutoriel permettant de faire le même effet sur les avatars que sur CSSActif, réalisé par Hiro si ma mémoire est bonne ? Ce serait une bonne piste pour commencer, non ?

Oui je connais ce tutoriel, je l'ai déjà utilisé x) J'ai essayé de refaire la même base du code mais ça ne fonctionnait pas du tout. Je pense que j'avais oublié un truc. Faudrait que je me repenche dessus.

Tu dis, sinon, que tu planchais sur un tutoriel pour expliquer de telles transitions ? Dans ce cas, je peux bien attendre et essayer de mon côté =)

Bonsoir,

Et bien dans l'expective d'un futur tutoriel expliquant tout ça, je vais essayer de mon côté dès que j'aurais le temps. On peut sans doute considérer le sujet comme terminé, donc. J'aurais du prévenir, je suis désolée.

Malheureusement, ce n'est pas un tutoriel mais un simple code à copier coller :p Il est fait, avec démo, ya plus qu'à attendre que mes collègues le valident

D'accord, je verrai ça alors =) En attendant, je vais essayer de mon côté ce week end si je trouve un peu de temps pour le faire. Merci !

Oh pardon ! C'est entièrement de ma faute, on va dire que le problème est résolu. Je n'ai pas trop le temps de me pencher là dessus en fait. Merci pour l'aide et je m'excuse encore d'avoir oublié de prévenir.

Pas de problème, Abysse, j'archive.
Merci de ta réponse.