changer une image par une autre?

Version imprimable

04/03/2010, 11h27
keokaz

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

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:

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
04/03/2010, 11h54
danielhagnoul

Bonjour.

On peut utiliser l'attribut source : oui !

Code:

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

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:

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:

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?

04/03/2010, 12h27
Bovino

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:

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

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:

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:

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..

04/03/2010, 23h34
danielhagnoul

Bonsoir.

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

Bonsoir!

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

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:

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'); }); });
Dans les deux cas, l'id de ta balise area doit correspondre avec le nom de ton image.

En espérant avoir donné un coup de main..!

05/03/2010, 15h43
keokaz

merci impérator cela fonctionne très bien, je n'avais pas songé d'ajouter une classe :)
05/03/2010, 18h04
A-Imperator

Parfait!

Bon courage et à bientôt!