11548 sujets

JavaScript, DOM et API Web HTML5

Changer une image avec jquery.

bonsoir ,j'éspère trouver des réponses a mes question Smiley smile

ma première question de mon premier poste

comment peut t'on faire pour changer une image par une autre avec jquery.

Par exemple:

j'ai une image de la région rhone Alpes elle est pour le moment en noire est blanc
quand je survole cette image, elle est colorié.
J'ai donc crée une image en noir est blanc et une autre en couleur,j'ai commencé par faire
un petit test:



$(document).ready(function()
	{

		
		$('#BN').mouseover(function(){
			alert('basse_normandie');
		});
		
		                    		$('#corse').mouseover(function(){
			alert('corse');
		});
		
		$('#RA').mouseover(function(){
			alert('Rhone Alpes');
		});
</code>
voici le code html:

[code]
<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" />

donc ici quand je survole la region rhone alpes j'ai bien un message rhone alpes, ici quell est
la fonction qu'il faut utiliser pour que je puisse charger l'image qui est en couleur

merci de vos réponses
Modifié par keokaz (03 Mar 2010 - 20:50)
Bonjour,
Pour changer un attribut avec jQuery :

$('#BN').mouseover(function(){

			$("#BN").attr("href","../france/Rhone-Alpescouleur.html");

		});

PS:tu devrais trouver une méthode pour n'avoir à créer qu'un évènement ... par exemple donner à tes images un nom contenant l'id du conteneur.
si tes images s'appelaient BN.jpg, RA.jpg et BN_couleur.jpg.

$('area').mouseover(function(){
              id=$(this).attr("id");
	      $(this).attr("href", id + "_couleur.jpg");

		});

Il reste ensuite à gérer le mouseout ...
Modifié par loicbcn (04 Mar 2010 - 09:27)
merci de ta réponse après reflexion j'aurais une autre facon de faire

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


voici mes 2 images ca doit être plus parlant de même taille:

http://keokaz.fr/france.png
http://keokaz.fr/RA.png

si je suis en dehors de ma region je fait


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


si je pointe ma souris sur la regions souhaité je fait:


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


voici le code html entier

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
  
<html>
	<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>
</html>


peut être que ta solution est la meilleur est que cette solution prend trop de ressource?

j'ai testé ce petit code il ne fonctionne pas pour testé afin qu'il change mon image

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


ici ca ne ne fonctionne pas bien qu'est ce qu'il faut ajouter?
Modifié par keokaz (04 Mar 2010 - 11:21)
j'ai essayer ce scipt a nouveau

$(function(){
  $('#corse').mouseover
  (
  function(){
          $('#map').attr("src","corse.png");             
            }
  );
  });


ici rien ne se passe quand je survole la corse


	  		<img 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>
Dans ton code HTML, tu n'as aucun élément qui aurait l'identifiant "map". Donc ton $('#map') ne correspond à rien.
Sujet clos
Aller à