Sujet Précédent Sujet Suivant

Créer un mapping sur un encart-image

Résolu
kennysp Messages postés 7 Date d'inscription mercredi 6 janvier 2010 Statut Membre Dernière intervention 27 novembre 2011 - 21 nov. 2011 à 16:56
@karamel Messages postés 1860 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 12 août 2024 - 23 nov. 2011 à 16:51
Bonjour,

L'idée est simple : je souhaiterais tout simplement recréer l'effet qu'il y a sur la home de la rubrique "offre internet" de Free (http://www.free.fr/adsl/).
Je m'explique je souhaiterais que mon image change au passage de la souris. Comme Free, j'aimerais découper mon encart en plusieurs zones, 8 très exactement (donc 8 images) et qu'au passage de chacune de ces zones, mon image change pour créer un scénario.
La seule différence, qui est minime, est que plutôt que de découper mon image horizontalement, j'aimerais la découper verticalement. En autres termes, c'est en déplaçant ma souris du bas vers le haut que mon scénario se déroule.

Je pense que cela doit être développé en javascript. Je ne sais pas si cela peut être fait en HTML5.
J'attends vos conseils ou vos tutos éventuels.

Voila ce que j'ai trouvé pour le moment :
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479771
http://forum.alsacreations.com/topic-2-32592-1-OnMouseOver-sur-Image-map.html

Ca doit surement être un mélange des deux?!!

En vous remerciant.
Kenny

3 réponses

Réponse 1 / 3
@karamel Messages postés 1860 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 12 août 2024 154
21 nov. 2011 à 21:30
bonjour

essai ce script 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<script type="text/javascript">
 
 tbimage=new Array

function changeimage(nom_image) {

document.getElementById("mon_imagemap").src="http://www.free.fr/im/2010/roto/"+nom_image+".jpg";

}

function init() {
for (i = 0; i <=24; i++){
    tbimage[i] = new Image();
tbimage[i].src = "http://www.free.fr/im/2010/roto/"+i+".jpg";
}
}
onload=init
</script>
</head>

<MAP name="ma_map" >
























</MAP>


</html>


c'est a adapter selon tes besoin mais c'est je pense une bonne base
3
Réponse 2 / 3
kennysp Messages postés 7 Date d'inscription mercredi 6 janvier 2010 Statut Membre Dernière intervention 27 novembre 2011
23 nov. 2011 à 12:25
Salut kazma,

Merci beaucoup, c'est exactement ça!! ça marche parfaitement, c'est super fluide et j'ai réussi à l'adapter.
Dernière question, je vais profiter de ta gentillesse pour te demander une petite ligne de code supplémentaire :

J'aimerais que lorsque l'utilisateur est en état de "mouseOut" (ou "rollOut"), l'image dans l'encart revienne toujours à la première c'est-à-dire nomImage0.jpg, soit i=0. Pour forcer l'utilisateur à passer sa souris sur l'encart pour voir le scénario.
J'espère que tu me comprends ^^

Merci beaucoup pour ton aide encore une fois, très efficace.


De plus, si tu as des connaissances en PHP :
http://www.phpcs.com/forum/sujet-ERREUR-CONNEXION-BASE-DONNEES-PHPMYADMIN_1557581.aspx

Désolé pour mon amateurisme.
Kenny
0
Réponse 3 / 3
@karamel Messages postés 1860 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 12 août 2024 154
23 nov. 2011 à 16:51
met le onmouseout dans la balise map 

<MAP name="ma_map" onmouseout="changeimage(1)">
0

Discussions similaires

Comment créer un quizz ?
Neo -
cs_SDan -

3 réponses
Algorithme Mot Caché
cs_nuns -
TUHABITES -

1 réponse
générer une grille de mots mêlés
orangin12FR -
orangin12FR -

2 réponses
Gestion de bulletin scolaire
abrahamfidelin -
abrahamfidelin -

6 réponses
mots meles
docducon -
azakeu -

7 réponses
Rejoignez-nous