Afficher plusieurs images avec onmouseover

Version imprimable

Bonjour,

Je souhaiterai pouvoir afficher plusieurs images en même temps avec la commande onmouseover.

Mon projet, sur une carte de France, je survole avec la souris certaine région ou département, qui changent de couleur a ce moment là, mais je voudrais en même temps afficher une autre image.

voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 2</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src='Cartes/'+nr+'.png'
zone.onmouseout=function(){pic.src='Cartes/RhoneAlpes  transparent.png'}
}
</script>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('Cartes/carte_rhone_alpes.png'); background-repeat: no-repeat">
<img id="hovered" src="Cartes/RhoneAlpes  transparent.png" usemap="#Map" width="417" height="388" />
<map name="Map">
 
<area href="#" onmouseover="swapPic(this,10)" shape="poly" coords="104,212,103,223,101,225,101,232,96,233,92,236,93,243,89,247,86,247,87,256,75,257,76,261,70,270,54,274,52,279,47,281,44,281,40,291,38,293,42,316,46,317,59,342,59,354,69,354,80,362,82,356,87,352,97,352,97,359,99,359,100,353,100,351,124,359,125,335,129,335,130,329,126,328,129,312,137,303,134,285,147,265,146,253,137,213,138,200,133,198,133,189,123,194,116,204,118,207,104,211" alt="Ardèche" title="Ardèche" target="Ardèche" Onclick= href="https://fr.wikipedia.org/wiki/Ard%C3%A8che_(d%C3%A9partement)" />
 
<area href="#" onmouseover="swapPic(this,11)" shape="poly"  coords="126,352,128,339,131,337,132,328,129,324,133,314,140,301,139,296,137,285,148,265,148,251,144,245,147,238,141,227,142,221,141,219,140,199,148,199,159,192,164,196,168,199,175,199,173,206,179,207,181,209,178,211,182,218,181,226,175,232,175,236,183,233,186,233,199,237,206,240,215,232,214,279,227,282,227,278,239,289,252,291,252,295,246,295,237,297,234,305,230,313,232,320,234,322,232,325,229,324,226,321,213,321,214,333,210,334,212,341,220,350,235,351,241,363,241,370,231,370,229,370,229,378,223,382,217,378,212,377,212,368,192,364,191,366,187,366,187,360,187,350,182,351,178,355,174,353,170,353,154,361,148,361,148,365,145,361,145,356,145,352,126,351,125,350" alt="La Drôme" title="La Drôme" target="La Drôme" Onclick=href="https://fr.wikipedia.org/wiki/Dr%C3%B4me_(d%C3%A9partement)"  />
 
 
<area href="#" onmouseover="swapPic(this,12)"shape="poly" coords="254,290,249,290,244,286,238,287,224,273,224,278,217,276,216,226,206,236,201,234,191,234,181,230,181,232,181,230,184,225,182,209,182,204,162,191,160,189,147,196,138,197,137,196,134,195,133,175,146,161,135,153,144,154,158,149,164,148,164,145,176,131,166,120,169,116,182,124,196,104,205,112,203,114,224,138,240,167,242,174,253,175,264,182,265,166,271,166,272,171,285,172,293,181,293,188,288,189,286,195,290,215,298,217,302,219,299,220,297,242,311,242,310,249,316,251,314,256,314,258,303,257,301,260,288,261,282,267,275,266,270,271,269,278,257,278,253,290" alt="Isère" title="Isère"  target="Isère" Onclick=href="https://fr.wikipedia.org/wiki/Is%C3%A8re_(d%C3%A9partement)" />
 
 
</map>
 
</div>
</body>
</html>

01/08/2018, 19h10
NoSmoking

Bonjour,

Citation:

... mais je voudrais en même temps afficher une autre image.

pourrais tu préciser où tu souhaites afficher cette image ou est-ce l'image de fond que tu souhaites changer, ce qui semble être le cas d'après ton code.
01/08/2018, 19h31
TMA61

Afficher plusieurs images avec onmouseover

Bonjour,

Merci pour attention.

Je souhaiterai afficher en bas à droite de ma carte régionale le blason du département survolé avec le curseur de la souris (qui change de couleur).
J'ai un fichier de type png de la dimension de ma carte régionale avec le blason du département sur fond transparent et que je souhaiterai superposer à ma carte.

Merci par avance pour votre aide.
02/08/2018, 16h53
NoSmoking

Je dirais dans ce cas mais que n'arrives tu pas faire ?

Je trouve quand même maladroit que de changer l'image complète plutôt que de faire apparaître simplement la vignette blason.

Je n'ai peut être pas encore bien saisi :oops:
05/08/2018, 11h35
TMA61

Citation:

Envoyé par NoSmoking

Je dirais dans ce cas mais que n'arrives tu pas faire ?

Je trouve quand même maladroit que de changer l'image complète plutôt que de faire apparaître simplement la vignette blason.

Je n'ai peut être pas encore bien saisi :oops:
05/08/2018, 11h57
TMA61

Bonjour,

En fait, lorsque le pointeur de ma souris passe au dessus d'un département de ma carte de France, ce département change de couleur car j'utilise la commande suivante :swapPic(this,32) qui affiche le fichier 32.png, qui représente le département sur volé dans une autre couleur sur fond transparent.

Code:

<area href="#" onmouseover="swapPic(this,32)" shape="poly"

Je voudrais donc pouvoir faire de même avec un autre fichier .png pour afficher le blason du département, qui change, bien sûr pour chaque département.
Donc dans la même zone, avec la fonction .

Code:

shape="poly" coords="96,44,95,51,97,58,101,62,116,57,126,59,129,67,133,72,133,77,133,80,138,81,137,88,133,90,134,102,138,103,137,111,139,116,139,120,145,120,147,126,147,129,149,129,153,135,149,140,147,146,153,151,151,154,147,155,140,161,144,165,143,168,143,188,137,194,142,201,141,211,143,218,149,218,148,222,138,226,138,230,145,234,145,244,150,243,155,241,165,242,163,253,160,260,161,261,165,254,169,255,166,259,171,260,174,269,188,267,188,263,194,263,194,268,199,264,198,257,203,256,206,259,215,257,218,251,222,252,225,257,231,256,234,258,240,254,259,251,260,243,269,241,271,248,295,255,299,249,305,250,317,237,332,232,329,227,317,214,307,211,300,213,288,209,271,202,268,198,259,196,255,188,236,186,236,183,229,185,216,173,215,160,217,159,216,156,193,155,189,150,185,149,179,147,175,144,176,141,171,135,166,134,160,120,170,118,168,112,173,109,167,105,166,102,175,94,173,91,169,88,168,81,161,76,161,73,156,69,156,62,156,56,158,48,151,44,142,36,135,34,134,37,120,36,116,37,115,44,110,45,109,43,105,40,96,44" alt="Meurthe et Moselle" title="Meurthe et Moselle" target="Meurthe et Moselle"

Mais après de multiples essais, je n'y suis pas arrivé, même en recopiant les codes, dès que la zone "coords" est identique rien ne se passe .

J'espère avoir été clair dans mes explications.

Merci par avance pour votre aide.
07/08/2018, 18h10
NoSmoking

Mes neurones étant un peu au ralenti en cette forte chaleur je vais essayé d'être compréhensible :D

Les id et name qui suivent sont pour exemple uniquement.

Initialement tu as une <img id="img-originale"> qui utilise une <map name="map-initiale"> pour afficher des images suivants le cas ta fonction swapPic(..,..).

Cette nouvelle <img id="img-num-xx"> utilise toujours la <map name="map-initiale"> affectée à ton <img id="img-originale"> de départ.

C'est là qu'il faut que tu prennes en compte une nouvelle <map>, exemple <map name="map-num-xx"> pour gérer l'image <img id="img-num-xx">.

A chaque image il te faut ou utiliser la <map> par défaut ou associer une <map> spécifique, cela risque d'être un peu lourd.

Je vais boire une :chin: avec mon pote modération.