18041 sujets

Questions générales et questions de débutants

Animation flash

Bonjour,

cela fait maintenant plusieurs jours que je tourne en rond sur le net, à chercher des solutions pour recréer CET EFFET, mais avec mes propres photos.

Ce que j'aimerais, donc, c'est afficher différentes photos selon la position de ma souris sur l'image, sans avoir besoin de cliquer sur l'image.

Au fil de mes recherches, j'ai vu des mots clés comme "OnMouseOver", "image map", des "areas" à définir, etc.

À noter que je suis absolument novice dans tout ça. Faut-il utiliser Flash, Javascript, du HTML ? Comment créer ces codes ? Quel code inscrire ? Bref, au fur et à mesure de mes recherches je me perds de plus en plus Smiley langue

Merci d'avance pour votre aide !

M.L.

PS : J'espère vous écrire dans la bonne catégorie du forum, étant débutant, malgré l'existence des catégories java, HTML... Smiley ohwell
J'ai juste, pour le moment, réussi à créer des tranches sur ma photo de départ et à les lier chacunes à des URL, avec Photoshop. Mais pour voir les images liées à chaque tranches, il faut cliquer sur la tranche et l'image s'ouvre dans un nouvel onglet...

Comment coder afin que cela se fasse quand je passe la souris sur chaque tranche et que l'image d'origine soit remplacée par l'image liée par l'URL à la tranche survolée ?
Modifié par lcd (23 Apr 2012 - 12:50)
Je pense que le plus simple est de passer par du HTML avec un peu de javascript.
Il te faut une image de fond et superposer dessus des div rectangulaires qui vont correspondre aux zones de modifications de l'image au passage de la souris.
Ensuite il te suffira de faire des onMouseOver sur chaque div en changeant la source de ton image à chaque fois.

J'espère t'avoir aidé.

A+
Modérateur
WebD a écrit :
Je pense que le plus simple est de passer par du HTML avec un peu de javascript.
Il te faut une image de fond et superposer dessus des div rectangulaires qui vont correspondre aux zones de modifications de l'image au passage de la souris.
Ensuite il te suffira de faire des onMouseOver sur chaque div en changeant la source de ton image à chaque fois.

J'espère t'avoir aidé.

A+

Plutôt que de rajouter des div inutilement, récupérer la position de la souris par rapport à l'image, ensuite une division de la largeur par le nombre d'image permettra de savoir quelle image mettre. Cela permet en outre de facilement utiliser le même système avec un nombre de photos différent.

Ensuite il y a le problème du chargement, une grande image pourrait convenir, ou un bon préchargement en javascript.
Merci ! BOn pour le moment j'ai fait plus simple pour m'habituer un peu à toutes les balises. Je viens de comprendre comment simplement remplacer une image par une en la survolant. Reste plus qu'à insérer cette histoire de cadres dans le code !

PS : y'a-t-il un code pour demander au navigateur de précharger toute "l'animation" (l'image initiale et les images qui apparaissent au survol) ? Car j'observe un petit délai au premier survol... Merci Smiley cligne
Bonjour lcd,
le bout de code que tu espères sera tout simplement du .css avec une class .precharge{display:none}

Tu intègres ensuite tes images au .html juste après <body> avec un <div class="precharge">Ici tu places toutes tes images : elles seront immédiatement téléchargées et mises en cache sans toutefois apparaître</div>

Cette solution est simplissime et performante.
Sujet clos
Aller à