changer une image par une autre?

**keokaz** · 04/03/2010, 11h27

Bonjour a tous je souhaite changer une image par une autre voici
le scipt de mon image:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id="map" src="france.png" width="600" height="600" border="0" usemap="#map" />

j'ai essayé de remplacé france.png par RA.png mais cela ne fonctionne pas
voici le js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(function(){ 
$('img').attr("src","RA.png");
});

mon jquery est correctement charché quand j'utilise
$('img').hide(1000); il disparait correctement.

ai-je le droit d'utiliser src?
merci de vos réponse

**danielhagnoul** · 04/03/2010, 11h54

Bonjour.

On peut utiliser l'attribut source : oui !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#map").attr("src","RA.png");

**keokaz** · 04/03/2010, 12h12

merci de ta réponse, cela fonctione bien, j'ai bien affichier RA.png
maintenant je souhaite que si je survole RA(rhone alpes):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$(function(){
   mouseover{
  $('#map').attr("src","RA.png");
  };
});

voici le code html ce qu'il y a après

Code :

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
 
	<body>
	  		<script type="text/javascript" src="../jquery/jquery.js"></script>
		<script type="text/javascript" src="carte.js"></script>
 
 
 
	  		<img id="map" src="france.png" width="600" height="600" border="0" usemap="#map" />
			<map name="map">
 
<area id="corse" shape="poly" coords="507,443,466,493,502,551,536,505,508,448" target="_blank" href="../france/corse.html" />
<area id="RA" shape="poly" coords="349,403,374,381,355,369,347,341,349,329,399,317,424,330,444,331,453,322,462,376,427,381,423,402,398,421,365,421,350,401" target="_blank" href="../france/Rhone-Alpes.html" />             
 
 
			</map>
	</body>

ici quand je survole rien ne se passe, je suis obligé de déclarer une variable?

**Bovino** · 04/03/2010, 12h27

Ben... c'est une chose d'utiliser mouseover, mais encore faut-il l'appliquer à un objet jQuery !
De plus, mouseover est une méthode, pas un objet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#map').mouseover(function(){...});

**keokaz** · 04/03/2010, 12h47

merci cela fonctionne très bien j'ai fait une grosse faute

objet puis point puis methode

$(document

j'ai essayer en remplacant les id:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(function(){
  $('#corse').mouseover
  (
  function(){
          $('#map').attr("src","corse.png");             
            }
  );
  });

maintenant cela fonctionne quand je survole j'ai bien mes images de région,
est ce une bonne idée d'écrire mes 22 région ou y a plus simple:

Code :

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
 
$(function(){
//survol corse
  $('#corse').mouseover
  (
      function(){
          $('#map').attr("src","corse.png");             
            }
  );
 
//survol rhone alpes
     $('#RA').mouseover
  (
      function(){
          $('#map').attr("src","RA.png");             
            }
  );
 
//survole bretagne
     $('#bertagne').mouseover
  (
      function(){
          $('#map').attr("src","bretagne.png");             
            }
  );
 
 
 
//etc.. je met mes 22 region...c'est un peu long..

**danielhagnoul** · 04/03/2010, 23h34

Bonsoir.

A priori, il devrait être possible de simplifier, mais impossible de répondre exactement sans la totalité du code du problème.

**A-Imperator** · 05/03/2010, 00h48

Bonsoir!

Pour simplifier, tu pourrais peut être ajouter l'attribut onmouseover dans ta balise area, du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<area id="corse" onmouseover ="updateImage('corse');" .... />
....
 
function updateImage(image) {
  $('#map').attr('src',image+'.png'); 
}

Ou, ce que je trouve mieux, quelque chose comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<area id="corse" class="region" .... />
<area id="RA" class="region" .... />
....
 
$(function(){
  $('.region').mouseover (
   function(){
          var id = $(this).attr('id');
          $('#map').attr('src', id+'.png');             
   });
});