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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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>