Discussion :

[Trinita92]

Bonjour � tous!

J'esp�re cette fois poster dans le bon forum (je suis d�butante et je m'emm�le rapidement les pinceaux.. d�sol�e d'avance si c'est la cas).

Je suis en train de r�aliser un test pour "l'insertion d'une image cliquable avec lancement d'animation au passage de la souris dans un blog Blogger".

J'ai r�ussi � cr�er mon gif test sur Gimp, � l'ins�rer sur mon blog test gr�ce � un gadget HTML/Javascript, mais manifestement j'ai fait une erreur au moment de pr�ciser "onmouseover" et "onmouseout".

Voici mon code:

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<img src="https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif" width="200" height="250" border="0" usemap="#map" />
 
<map name="map">
 
<area shape="rect" coords="4,160,193,241" onmouseover="this.src='https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif';" onmouseout="this.src='https://photos-4.dropbox.com/s/byoc9vios8kj7tc/Accueil%20animation%2014.gif';"href="http://kobai-uneblondeetblogger.blogspot.fr/" />
</map>

Je tiens � pr�ciser sur j'ai mis des liens Dropbox car je n'arrive pas � faire appara�tre mes images (aussi simples soient-elles) juste avec le chemin users//...etc. (Si vous pouvez m'aider � comprendre pourquoi au passage, j'en serai tr�s heureuse!!).

L'adresse de mon "blog test": http://kobai-uneblondeetblogger.blogspot.fr/
(ne faite pas attention � la taille improbable de l'image ou encore � son d�calage, c'est vraiment juste un test de fonctionnement).

J'aimerais aussi provoquer un effet d'animation invers�e au moment du mouseout. Je sais qu'il y a une balise pour �a mais je ne parviens pas � la retrouver. "return".. quelque chose?

Autre point:
Mon but final est de r�aliser un menu de navigation (Accueil, page 1, page 2, etc) avec donc, des boutons cliquables (�a c'est ok) et une image qui s'anime au dessus lors du passage de la souris (d'o� le pr�sent test).
Je cherche donc � savoir, pour ma prochaine �tape, si ce m�me proc�d� est possible avec une seule et m�me image de base qui "porterait" tous mes onglets de navigation, mais avec des animations dissoci�es puisque li�es � chaque onglet.
Il me semble que c'est au moment de cr�er l'image map sur Gimp que cela peut se faire, en indiquant les onmouseover/onmouseout correspondants, mais si vous aviez la r�ponse par avance �a serait super.

Mille fois merci d'avance pour votre aide!

Trinita

[SpaceFrog]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

this.

� ton avis this c'est quoi ?

dans ce contexte this = l'area, et un area n'a pas de src !

[Trinita92]

Hm

Merci Spacefrog pour la r�ponse.

Mais comme je l'ai dit, je suis une d�butante; il y a 15 jours je ne savais pas ce qu'�tait le code!

En fait j'ai indiqu� this.src de cette mani�re tout simplement parce que je l'ai retrouv� dans plusieurs tuto et forums sous cette forme.

Merci de m'avoir indiqu� qu'une area n'a pas de src, mais o� est la solution?

Dois-je indiquer une balise sp�ciale pour d�finir les onmouseover/onmouseout?

Merci

[SpaceFrog]

met un id sur l'image et modifie le src en passant pas getElementById

[Trinita92]

D�sol�e je n'arrive pas � suivre. Pourrais-tu me donner un exemple de code "dans le bon sens" avec ces nouveaux �l�ments?
Car l� c'est du chinois pour moi !

Je m'appr�tais � �crire que j'avais compris et que sachant que le this. renvoyait ici � l'area, il fallait que je mette onmouseover/out non pas dans la partie Area mais au d�but du code, dans img src.
Mais en r�fl�chissant, m�me si cela avait march� pour 1 image, cela ne pourrait s'appliquer � un menu entier comme ce que je veux faire au final, a priori.

[Trinita92]

Bon.
D'autres suggestions?

Pour r�sumer mon probl�me en 1 phrase:
J'ai besoin qu'on m'aide a trouver le bon code pour que mon gif s'anime au passage de la souris et "s'anime dans le sens inverse" en onmouseout.
Voil�.

Apparemment dans mon code (voir premier msg) j'ai mal plac� this.src car �a n'a pas de sens dans <area
Et selon ce que m'a dit Spacefrog il faudrait que je joue avec une id pour mon image et getelementbyid.
J'ai biensur fait des recherches pour comprendre comment �a pouvait s'articuler en code mais trop �labor� pour moi et pas trouv�.

Je suis s�re que vous pourriez m'aider en 2 secondes, s'il vous plaiiiiit

Merci d'avance...