Code onmouseover onmouseout

Version imprimable

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:

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

21/03/2014, 08h35
SpaceFrog

Code:

this.

à ton avis this c'est quoi ?

dans ce contexte this = l'area, et un area n'a pas de src !
21/03/2014, 12h30
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
21/03/2014, 12h36
SpaceFrog

met un id sur l'image et modifie le src en passant pas getElementById
21/03/2014, 12h57
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.
22/03/2014, 14h47
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...
22/03/2014, 16h17
NoSmoking

Bonjour,

Citation:

J'ai biensur fait des recherches pour comprendre comment ça pouvait s'articuler en code mais trop élaboré pour moi et pas trouvé.

là je reste perplexe quand même...

Citation:

D'autres suggestions?

fais une recherche sur ce site par exemple
Recherche sur ce site
22/03/2014, 18h40
Trinita92

Bonjour NoSmoking,

Après 2 hr de recherches:
Effectivement, après en avoir parcouru pas mal j'ai trouvé une réponse sur un des liens présents sur la recherche que tu m'as donnée:http://www.developpez.net/forums/d13...eover-inactif/

C'est du moins le seul que j'ai compris.

Par contre je ne comprends pas trop le ton ironique, désolée. Vous avez peut-être oublié comment on est quand on débute, en l'occurrence: on ne sait pas forcément effectuer LES BONNES recherches dès le départ. Ce n'est pas forcément qu'on est une pouf flemmarde assistée et de mauvaise foi.
Je ne suis pas là pour faire perdre leur temps aux gens en ce qui me concerne, mais bref.
Merci pour ton aide, donc.

Pour info (et comme quoi j'essaie de me démerder avec le peu que je sais) j'ai dû trifouiller et modifier quelques trucs, notamment le nom de l'id -> pas trouvé comment la nommer correctement (ma recherche "nommer correctement un id"...) donc j'ai testé de mettre l'url complète, et cela a fonctionné.
Pour info toujours (cela pourrait intéresser d'autres débutants, peut-être?) je n'ai pas réussi à 100% ma manip puisqu'avec ce code, mon image n'apparaît QU'A PARTIR du moment où la souris survole le bouton.
Avant d'effectuer cette action, le cadre reste vide. J'ai tenté la recherche suivante sur ce site ainsi que sur google: "mon image n'apparait qu'au survol de la souris".
Je ne vois pas comment formuler la chose autrement. Mais rien puisque les réponses concernent généralement des problème d'image qui n'apparaît pas AU survol de la souris. Je continuerai malgré tout mes recherches, bien évidemment.

Merci pour l'aide.
Trinita

Résolution finale

Re,

Pour ceux que cela pourrait intéresser, voici comment j'ai terminé de résoudre mon problème suite aux indications données par NoSmoking:

Pour que l'image apparaisse dès le chargement de la page sans attendre l'action "survol de la souris", j'ai remplacé "img id= "nom de l'image"" par "img src="nom de l'image" id="nom de l'image""

Je me doutais bien qu'il manquait un "src" là-dedans et que ça expliquait l'absence d'image hors de l'animation, j'ai testé, ça a marché. Cool!

le nouveau code pour mon image cliquable avec gif animé qui se déclenche au survol de la souris:
Code:

1 2 3 4 5 6 <div> <img src="https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif" id="https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif" width="200" height="250" usemap="#map"/> <map name="map"> <area title="Accueil" shape="rect" coords="4,160,193,241" href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="getElementById('https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif').src='https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif'" onmouseout="getElementById('https://photos-4.dropbox.com/s/2x2j9ya13a1alv2/Animation%20test%20palmier%20accueil%20retour.gif').src='https://photos-4.dropbox.com/s/2x2j9ya13a1alv2/Animation%20test%20palmier%20accueil%20retour.gif'" alt="Accueil"/> </map> </div>
Trinita

Citation:

on ne sait pas forcément effectuer LES BONNES recherches dès le départ.

quels liens très utiles

Document Object Model (DOM)
Basic DOM Reference
Welcome to the Dottoro Web Reference!

il y en aurait bien d'autres comme HTML: The Living Standard

Pour en revenir à ton code quelques remarques quand même l'ID de ton IMG n'a aucunement besoin d'être la même que la SRC

Code:

<img id="id_image" src="https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif" width="200" height="250" usemap="#map"/>

ce qui reviens dans ta MAP à écrire un truc plus clair
Code:

1 2 3 4 <area title="Accueil" shape="rect" coords="4,160,193,241" href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="document.getElementById('id_image').src='https://photos-4.dropbox.com/s/gi0yrubt15pau8w/Animation%20test%20palmier%20accueil%20bon%20sens.gif'" onmouseout ="document.getElementById('id_image').src='https://photos-4.dropbox.com/s/2x2j9ya13a1alv2/Animation%20test%20palmier%20accueil%20retour.gif'" alt="Accueil"/>
Une dernière chose concernant la méthode getElementById(), elle appartient à l'objet document donc il est préférable de l'indiquer, corrigé ci dessus, même si certains navigateurs pourraient l'accepter.

23/03/2014, 22h59
Trinita92

Super, merci pour les ressources et pour les corrections de mon code!
Je vais potasser un peu et faire des tests maintenant que j'ai quelques bases plus saines.

Bonne soirée!
Trinita