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...