18008 sujets

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

[Résolu] Onmouseover et mappage html

Pages :
Bonjour,
Ca fait un moment que je cherche et que je tourne en rond... Je m'explique :
J'ai une image mappée avec 5 area. Je voudrais que lorsque la souris passe sur une de ces area l'image complète change.
Voici ce que j'ai essayé et qui ne fonctionne pas :
<td><img style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" id="mapsys" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys"> 
<map name="mapsys">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" title="SYS 1" coords="3,114,4,152,55,194,175,154,175,118,118,84" shape="poly" onmouseover="this.src='/images/stories/contenu/promo/Systainer/sys1ouvert.jpg';" onmouseout="this.src='/images/stories/contenu/promo/Systainer/base_sys.jpg';">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" onmouseout="images/stories/contenu/promo/Systainer/base_sys.jpg" onmouseover="images/stories/contenu/promo/Systainer/sys2ouvert.jpg" title="SYS 2" coords="61,224,60,280,111,322,231,282,231,230,174,193" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html" onmouseout="images/stories/contenu/promo/Systainer/base_sys.jpg" onmouseover="images/stories/contenu/promo/Systainer/sys3ouvert.jpg" title="SYS 3" coords="225,91,228,167,279,209,399,169,399,94,343,62" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html" onmouseout="images/stories/contenu/promo/Systainer/base_sys.jpg" onmouseover="images/stories/contenu/promo/Systainer/sys4ouvert.jpg" title="SYS 4" coords="267,241,270,349,321,391,441,351,441,245,383,214" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html" onmouseout="images/stories/contenu/promo/Systainer/base_sys.jpg" onmouseover="images/stories/contenu/promo/Systainer/sys5ouvert.jpg" title="SYS 5" coords="453,94,459,240,510,282,630,242,629,97,569,72" shape="poly"> 
</map>
</td>

Le mappage fonctionnent bien mais pas le mouseover...

En revanche le code suivant fait bien fonctionner le mouseover sur l'image de base :
<td><img style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" id="mapsys" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys" onmouseout="this.src='/images/stories/contenu/promo/Systainer/base_sys.jpg';" onmouseover="this.src='/images/stories/contenu/promo/Systainer/sys1ouvert.jpg';"> 
<map name="mapsys">
.....


Ca fait plusieurs jours que je tourne en rond et je deviens DINGUUE !!!
Merci d'avance
Modifié par dwarf17 (31 Mar 2011 - 08:05)
Bonjour,

Le problème est dû au fait que l'attribut "src" n'existe pas pour la balise area d'une map. Par contre, tu pourrais peut-être utiliser l'attribut "href".
Cordialement
Modifié par lddsoft (30 Mar 2011 - 14:53)
Merci,
Mais alors il faut mettre quel attribut ?
Ca serait super simple si on pouvait juste faire : 
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" src="images/stories/contenu/promo/Systainer/sys2ouvert.jpg" title="SYS 2" coords="61,224,60,280,111,322,231,282,231,230,174,193" shape="poly">

Mais ca ne marche pas...
Tu peux aussi afficher une infobulle (avec javascript, jQuery...) sur l'événement "onmouseover" ...
J'ai une image avec 5 produits dessus :

J'ai recréé une image (même dimensions, même fond,..) pour chaque mouseover sur chaque produit avec un petit mouvement sur le produit concerné (ouverture de la caisse).

Je ne pense pas qu'avec infobulle ce soit possible, si ?
Modifié par dwarf17 (01 Apr 2011 - 08:19)
Tout dépend de l'effet escompté. Il ne faut pas espérer obtenir des animations comme en Flash, bien sûr!
Si l'objectif est de montrer une image avec le contenu des caisses, cela peut suffire. Tu peux afficher l'infobulle en utilisant un script jQuery ou autre
Oui, ce n'est pas du flash biensure, juste une autre image.
Par exemple quand on passe la souris dans l'area du premier produit, je voudrais que ça mette ça :


Je suis débutant dans le code et je ne voit pas du tout comment faire, j'ai essayer tellement de truc que je crois que j'ai fait le tour... Mais biensure il doit y avoir la solution sous mon nez mais que je ne peux pas trouver tout seul...

Si tu peux jeter un oeil au script de ma page et tester des trucs qui te passe par la tête, tout est prêt sur cette page : http://www.

Merci pour ton aide
Modifié par dwarf17 (01 Apr 2011 - 08:19)
OK, on voit un peu plus clair! Je suppose donc que tu as une image par produit ouvert (= 5 images + 1 image avec tout fermé).
Si c'est le cas, il doit y avoir moyen de faire quelque chose au moyen de javascript/jQuery.
Sur le onmouseover, remplacer l'image initiale (où tout est fermé) par l'image où le produit survolé est représenté ouvert. Sur le onmouseout, revenir à l'image initiale pour permettre de cliquer éventuellement.
lddsoft a écrit :
Je suppose donc que tu as une image par produit ouvert (= 5 images + 1 image avec tout fermé).

OUI !
lddsoft a écrit :
Sur le onmouseover, remplacer l'image initiale (où tout est fermé) par l'image où le produit survolé est représenté ouvert. Sur le onmouseout, revenir à l'image initiale

C'est pourtant ce que j'ai fait et ça ne marche pas quand c'est dans une "area"... Mais ca marche quand je le fait sur l'image de base qui est mappée. Mais aucun intérêt puisqu'il ne change qu'en une seule image. Exemple : (voir sur site, laissé en ligne pour voir)
<td><img style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" id="mapsys" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys" onmouseout="this.src='/images/stories/contenu/promo/Systainer/base_sys.jpg';" onmouseover="this.src='/images/stories/contenu/promo/Systainer/sys1ouvert.jpg';">


lddsoft a écrit :
Si c'est le cas, il doit y avoir moyen de faire quelque chose au moyen de javascript/jQuery.

Je ne connais pas jQuery... Et je ne sais pas si je peux me servir de Javascript sur mon site ?
Modifié par dwarf17 (30 Mar 2011 - 16:21)
Pour le javascript, no problem! Par contre, tu utilises déjà la librairie Mootools.
Voici un code qui fonctionne, malheureusement je n'ai pas toutes les images.
Examine bien le code, remet les bons chemins vers les images, adapte/complète les attributs id pour "img" et "map", ajoute les attributs "alt", complète les "onmouseover" et "onmouseout", ajoute la partie javascript ... et cela devrait fonctionner. (J'ai laissé les liens href)

<!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>test</title>
    <script type="text/javascript">
		//<![CDATA[
		function montrer(pic){
			document.getElementById('map-sys').src = pic;
		}
		function cacher(){
			document.getElementById('map-sys').src = "base_sys.jpg";
		}
    //]]>
    </script>
  </head>
  <body>
<img alt="base_sys" src="base_sys.jpg" usemap="#mapsys" id="map-sys" style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" />
	<map name="mapsys" id="mapsys">
		<area shape="poly" coords="3,114,4,152,55,194,175,154,175,118,118,84" title="SYS 1" alt="SYS 1" onmouseover="montrer('sys1ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" />
		<area shape="poly" coords="61,224,60,280,111,322,231,282,231,230,174,193" title="SYS 2" alt="SYS 2" onmouseover="" onmouseout="" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" />
		<area shape="poly" coords="225,91,228,167,279,209,399,169,399,94,343,62" title="SYS 3" alt="SYS 3" onmouseover="" onmouseout="" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html" />
		<area shape="poly" coords="267,241,270,349,321,391,441,351,441,245,383,214" title="SYS 4" alt="SYS 4" onmouseover="" onmouseout="" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html" />
		<area shape="poly" coords="453,94,459,240,510,282,630,242,629,97,569,72" title="SYS 5" alt="SYS 5" onmouseover="" onmouseout="" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html" /> 
	</map>

  </body>
</html>

Modifié par lddsoft (30 Mar 2011 - 16:42)
Merci,
En modifiant les liens des images ça ne marche pas encore, mais voila le code que j'obtiens :

    <script type="text/javascript">

		//<![CDATA[

		function montrer(pic){

			document.getElementById('map-sys').src = pic;

		}

		function cacher(){

			document.getElementById('map-sys').src = "base_sys.jpg";

		}

    //]]>

    </script>

  </head>

  <body>

<img alt="base_sys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" usemap="#mapsys" id="map-sys" style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" />

	<map name="mapsys" id="mapsys">

		<area shape="poly" coords="3,114,4,152,55,194,175,154,175,118,118,84" title="SYS 1" alt="SYS 1" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" />

		<area shape="poly" coords="61,224,60,280,111,322,231,282,231,230,174,193" title="SYS 2" alt="SYS 2" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys2ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" />

		<area shape="poly" coords="225,91,228,167,279,209,399,169,399,94,343,62" title="SYS 3" alt="SYS 3" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys3ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html" />

		<area shape="poly" coords="267,241,270,349,321,391,441,351,441,245,383,214" title="SYS 4" alt="SYS 4" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys4ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html" />

		<area shape="poly" coords="453,94,459,240,510,282,630,242,629,97,569,72" title="SYS 5" alt="SYS 5" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys5ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html" /> 

	</map>
  </body>

</html>

Je bloque... Je ne comprend pas ce qu'il faut modifier aux attributs.
Dans le script javascript, tu as créé le code pour faire appel aux images, et il faut se resservir de la fonction dans le mouseover c'est ça ? Mais c'est là que mon niveau de connaissance m'empêche d'avancer, je ne comprend pas bien le code de javascript et je ne sais donc pas m'en servir. Si je comprend bien, il faut nommer la fonction d'appel avec .src (par ex : ouvert.src) et remettre ça là : onmouseover="ouvert.src=''sys1ouvert.jpg;".

J'aimerais bien comprendre ça c'est super utile...
Merci pour ton aide
Tu n'as pas corrigé l'adresse de l'image dans 
document.getElementById('map-sys').src = "base_sys.jpg";
Ah oui... C'est fait :
<!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>test</title>

    <script type="text/javascript">

		//<![CDATA[

		function montrer(pic){

			document.getElementById('map-sys').src = pic;

		}

		function cacher(){

			document.getElementById('map-sys').src = "/images/stories/contenu/promo/Systainer/base_sys.jpg";

		}

    //]]>

    </script>

  </head>

  <body>

<img alt="base_sys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" usemap="#mapsys" id="map-sys" style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" />

	<map name="mapsys" id="map-sys">

		<area shape="poly" coords="3,114,4,152,55,194,175,154,175,118,118,84" title="SYS 1" alt="SYS 1" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" />

		<area shape="poly" coords="61,224,60,280,111,322,231,282,231,230,174,193" title="SYS 2" alt="SYS 2" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys2ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" />

		<area shape="poly" coords="225,91,228,167,279,209,399,169,399,94,343,62" title="SYS 3" alt="SYS 3" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys3ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html" />

		<area shape="poly" coords="267,241,270,349,321,391,441,351,441,245,383,214" title="SYS 4" alt="SYS 4" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys4ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html" />

		<area shape="poly" coords="453,94,459,240,510,282,630,242,629,97,569,72" title="SYS 5" alt="SYS 5" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys5ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html" /> 

	</map>
  </body>

</html>

Par contre il y a un truc que je comprend pas c'est qu'il n'apparait pas dans le code source... Ni dans mon code html une fois sauvegardé.
Le code javascript, je ne le vois plus dans le code source de la page. Je l'ai mis en bloc avec le reste sur la même page html, il faut peu être le mettre ailleurs ?
Idéalement, il faut le mettre entre des balises < script type="text/javascript">...< /script> dans la partie < head>...< /head> du code-source de la page.
Attention:
Je viens de voir dans le code de la page qui est sur ton site, que tu as copié/collé 2 lignes superflues (les 2 lignes avant < img alt="base_sys")

Je ne vois pas non plus de trace du script javascript que je t'ai fait.
Eh j'ai essayé de mettre ton code javascript entre les balises head comme tu m'a dit (dans firebug pour l'instant) et ça marche !!!
Maintenant je ne sais pas ou se trouve le fichier html ou il faut mettre le code...
Et par rapport au titre que tu as mis "test" je peux mettre quoi à la place ?

a écrit :
Je viens de voir dans le code de la page qui est sur ton site, que tu as copié/collé 2 lignes superflues (les 2 lignes avant < img alt="base_sys")

</head>
<body>
Ca ?

Un grand merci pour ton code
Bah elles ont été enlevées toutes seules... lol elle y sont pas dans le code source de la page...

Quand je met ça dans le code source ça marche :
<td>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>test</title>

    <script type="text/javascript">

		//<![CDATA[

		function montrer(pic){

			document.getElementById('map-sys').src = pic;

		}

		function cacher(){

			document.getElementById('map-sys').src = "/images/stories/contenu/promo/Systainer/base_sys.jpg";

		}

    //]]>

    </script>

<img style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" id="map-sys" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys"> 
<map id="map-sys" name="mapsys">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" alt="SYS 1" title="SYS 1" coords="3,114,4,152,55,194,175,154,175,118,118,84" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys2ouvert.jpg');return false;" alt="SYS 2" title="SYS 2" coords="61,224,60,280,111,322,231,282,231,230,174,193" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys3ouvert.jpg');return false;" alt="SYS 3" title="SYS 3" coords="225,91,228,167,279,209,399,169,399,94,343,62" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys4ouvert.jpg');return false;" alt="SYS 4" title="SYS 4" coords="267,241,270,349,321,391,441,351,441,245,383,214" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys5ouvert.jpg');return false;" alt="SYS 5" title="SYS 5" coords="453,94,459,240,510,282,630,242,629,97,569,72" shape="poly"> 
</map>
</td>


Mais après quand je le met dans le fichier du site ça ne marche plus et le code disparait tout seul.
Pages :
Sujet clos
Aller à