Créer un mapping sur un encart-image

Résolu
Signaler
Messages postés
7
Date d'inscription
mercredi 6 janvier 2010
Statut
Membre
Dernière intervention
27 novembre 2011
-
Messages postés
1797
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 novembre 2021
-
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

Messages postés
1797
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 novembre 2021
139
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
Messages postés
7
Date d'inscription
mercredi 6 janvier 2010
Statut
Membre
Dernière intervention
27 novembre 2011

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
Messages postés
1797
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 novembre 2021
139
met le onmouseout dans la balise map

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