Récupérer une variable d'un attribut pour l'insérer autre part

Résolu
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   -  
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je viens vers vous car j'ai un petit soucis, je m'explique:

J'ai 3 images dont la 2ème qui se trouve au centre : 

<img src="img/programme/arts_divinatoire-titre.png" alt="Arts divinatoires" id="img-g">
<img src="img/programme/medecine_naturelles.png" alt="Medecines naturelles" id="img-center">
<img src="img/programme/conf_ateliers-titre.png" alt="Conférences et ateliers" id="img-d">


Mon but est de faire une fonction qui, au clique sur la première image, inverseras les deux images ( donc la premiere image ira au centre et celle au centre remplaceras la 1ère) et pareillement pour la 3ème image ( au clic celle-ci viendras au centre et celle au centre prendras ça place).

jQuery me semble le plus adapté pour le faire, pour l'instant j'ai essayé quelque chose comme ceci: 

$('#img-g').on({
    'click': function(){
    $('#img-g').attr('src','img/programme/medecine_naturelles-titre.png');
    $('#img-g').attr('alt','Médecines naturelles');
    $('#img-center').attr('src','img/programme/arts_divinatoire.png');
    $('#img-center').attr('alt','Arts divinatoires');
    }
});


Ce qui marche mais qui n'est pas vraiment juste parce que je choisis manuellement l'image qui se mettras à sa place or que je veux que c'est celle qui es au centre qui se met à sa place.

Merci pour votre aide !
A voir également:

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Vu ton code .. tu aurais pu le faire sans jquery...

Mais bon un truc du genre devrait marcher : 
$('#img-g').click(function(){
   switchImg('img-g','img-center');
});

$('#img-d').click(function(){
  switchImg('img-d','img-center');
});

function switchImg(id_img1,id_img2){
 var img1_src = $("#"+id_img1).attr('src');
 var img1_alt = $("#"+id_img1).attr('alt'); 
 var img2_src = $("#"+id_img2).attr('src');
 var img2_alt = $("#"+id_img2).attr('alt'); 
 
 $("#"+id_img1).attr('src', img2_src);
 $("#"+id_img1).attr('alt', img2_alt);
 $("#"+id_img2).attr('src', img1_src);
 $("#"+id_img2).attr('alt', img1_alt);
}

1
Réponse 2 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Le problème est lié à l'utilisation de l'instruction DATA en jquery...
En fait.. il ne réactualise pas le contenu.. pour le forcer on passer par le attr
Voila : 
<html>
<head>
 <meta charset="utf8">
 <title>TEST</title>
</head>
<body>

  <div id="img-bck">
     <div id="cartes"> 
       <img src="img/programme/arts_divinatoire.png" alt="Arts divinatoires" id="imgg" data-txt="div_txt_arts"> 
       <img src="img/programme/medecine_naturelles.png" alt="Medecines naturelles" id="imgcenter" data-txt="div_txt_medecines"> > 
       <img src="img/programme/conf_ateliers.png" alt="Conf곥nces et ateliers" id="imgd" data-txt="div_txt_conferences"> > 
     </div>
    <div id="text-prog" data-bottom=" opacity: 0; left: 10%" data-center="left: 51%; opacity: 10" data-anchor-target= "#programme">
      <div class="txt txt-med" id="div_txt_medecines" >
        <h2>Mꥥcines <br> Naturelles</h2>
        <div class="desc">
          <p>Les mꥥcines naturelles et alternatives permettent de retrouver parmi les psychoth곡peutes pr괥nts, diff곥ntes m굨odes telles que lөquilibre ꯥrg굩que, les th곡pies psycho-corporelles, le d귥loppement personnel, la sophrologie, le magn굩sme, lӨypnose, le Feng Shui, le massage, le reiki ou encore la cristallomancie et la g갢iologie.</p>
        </div>
      </div>
      <div class="txt txt-art" id="div_txt_arts">
        <h2>Arts <br> divinatoires</h2>
        <div class="desc">
          <p>Les parapsychologues venus des quatre coins de France et dӅurope mettront au service dӵne consultation leur don de voyance et celui es arts divinatoires par le biais des tarots, cartes, astrologie, pendule, boule de cristal, lignes de la main, num곯logie, cauris, g갭ancie, rhunes, marc de caf鬠t㤨es dӥncre, voyance directe et sur photos, spiritismeż/p>
        </div>
      </div>
      <div class="txt txt-conf" id="div_txt_conferences">
        <h2>Conf곥nces <br> & ateliers</h2>
        <div class="desc">
          <p>Des conf곥nces, des d꣡ts, des ateliers dөnitiation, sont propos꦳ toutes les heures par les spꤩalistes des sciences parall魥s qui nous feront entrer dans le monde de lӡu-delଠde la rꪮcarnation, des vies ant곩eures, des anges gardiens, de la transcommunication, des contacts spirites ou encore celui des ovnis, des extraterrestres et des nouvelles valeurs du bien-뵲e. </p>
        </div>
      </div>
    </div>
  </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">

$("div.txt").hide();
$("#div_txt_medecines").show();

 $('#imgg').click(function () {
  switchImg('imgg', 'imgcenter');
 });

 $('#imgd').click(function () {
  switchImg('imgd', 'imgcenter');
 });

 function switchImg(id_img1, id_img2) {
   
  var img1_src = $("#" + id_img1).attr('src');
  var img1_alt = $("#" + id_img1).attr('alt');
  var img2_src = $("#" + id_img2).attr('src');
  var img2_alt = $("#" + id_img2).attr('alt');
  var id_txt1 = $("#"+id_img1).attr('data-txt');
  var id_txt2 = $("#"+id_img2).attr('data-txt');
  
  console.info('Image 1:' + id_img1);
  console.log("img1_src : " + img1_src);
  console.log("img1_alt : " + img1_alt);
  console.log("id_txt1 : " + id_txt1);
  console.info('Image 2 :' + id_img2); 
  console.log("img2_src : " + img2_src);
  console.log("img2_alt : " + img2_alt);
  console.log("id_txt2 : " + id_txt2);
  
  $("#" + id_img1).attr('src', img2_src);
  $("#" + id_img1).attr('alt', img2_alt);
  
  $("#" + id_img2).attr('src', img1_src);
  $("#" + id_img2).attr('alt', img1_alt);
  
  $("#" + id_img1).attr('data-txt',id_txt2);
  $("#" + id_img2).attr('data-txt',id_txt1);
 //on masque toutes les div ayant la class txt
  $("div.txt").hide();
  

  //on affiche la div voulue
  $("#"+id_txt1).show();

   
 }

</script>
</body>
</html>

1
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
Effectivement ça fonctionne à merveille ! Un grand merci Jordane !
0
Réponse 3 / 6
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
Franchement mec tu me sauve la vie là !
J'étais en train de me compliquer vraiment la vie quand je vois ta solution!! Merci beaucoup !
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
N'oublies pas de mettre le sujet en resolu.
0
Réponse 4 / 6
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
Une dernière chose si tu sais m'aider je t'en serait extremement reconnaissant, j'ai c'est 3 textes la : 
   

<div class="txt txt-med">
   <h2>Médecines <br> Naturelles</h2>
   <div class="desc">
    <p>Les médecines naturelles et alternatives permettent de retrouver parmi les psychothérapeutes présents, différentes méthodes telles que l’équilibre énergétique, les thérapies psycho-corporelles, le développement personnel, la sophrologie, le magnétisme, l’hypnose, le Feng Shui, le massage, le reiki ou encore la cristallomancie et la géobiologie.</p>
   </div>
   </div>
   <div class="txt txt-art hidden">
   <h2>Arts <br> divinatoires</h2>
   <div class="desc">
    <p>Les parapsychologues venus des quatre coins de France et d’Europe mettront au service d’une consultation leur don de voyance et celui es arts divinatoires par le biais des tarots, cartes, astrologie, pendule, boule de cristal, lignes de la main, numérologie, cauris, géomancie, rhunes, marc de café, tâches d’encre, voyance directe et sur photos, spiritisme…</p>
   </div>
   </div>
   <div class="txt txt-conf hidden">
   <h2>Conférences <br> & ateliers</h2>
   <div class="desc">
    <p>Des conférences, des débats, des ateliers d’initiation, sont proposées toutes les heures par les spécialistes des sciences parallèles qui nous feront entrer dans le monde de l’au-delà, de la réincarnation, des vies antérieures, des anges gardiens, de la transcommunication, des contacts spirites ou encore celui des ovnis, des extraterrestres et des nouvelles valeurs du bien-être. </p>
   </div>
   </div>


et j'aimerais en fait que chaque texte s'affiche au milieu en fonction de l'image qu'il y a et que les deux autres soi caché c'est possible tu crois ?
Je suis pas super avancé en jquery
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu peux jouer avec la propriete display.
0
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Je dois faire un if et récupérer l'attribut Src et mettre en display celui qui correspond?
0
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
J'ai tenter quelque chose mais ca ne marche pas 

var IDCENTRE;
	IDCENTRE = document.getElementById("imgcenter");
	var SRCC;
	SRCC = imgcenter.getAttribute("src");
	

$('#imgg').click(function () {
		switchImg('imgg', 'imgcenter');
		if ((SRCC) == ('img/programme/arts_divinatoire.png')){
			$('.txt-art').removeClass("hidden");
			$('.txt-med').addClass("hidden");
	});
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
  

var IDCENTRE;
	IDCENTRE = document.getElementById("imgcenter");
	var SRCC;
	SRCC = imgcenter.getAttribute("src");

- Pourquoi passer par du "pur" javascript.. alors que juste avant tu m'as demandé du jquery ?*
- Pourquoi ta variable se nomme IDCENTRE .. et qu'en dessous tu utilises imgcenter ?


Pour ce qui est de faire ce que tu nous demandes .... tu devrais plutôt ajouter un ID à tes div de text. ID qui serait composé de la forme "div_txt_id_img" avec le id_img qui correspondrait à tes img-g , img-center ...

Ensuite, DANS LE CODE QUE JE T'AI DONNE .. il te suffirait de jouer avec ces ID
par exemple : 
$("#div_txt_"+id_img1).show();
$("#div_txt_"+id_img2).hide();
0
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Je suis désolé mais je comprend pas trop.

- Initialement je met donc les 2 texte non visible en visibility hidden?
- A quel moment je déclare le bout de code avec show et hide?


https://jsfiddle.net/6sh2d50c/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai fait un jsfidle pour que tu vois mieux :
https://jsfiddle.net/6sh2d50c/
0
Réponse 6 / 6
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
Voila, ça marche bien quand je clique sur l'image de gauche donc le texte qui correspond se place bien au centre avec l'image correspondante mais une fois que je clique sur l'image qui se met à la place de l'image de gauche le texte ne switch plus en certain textes reste visible or qu'ils devraient être caché 

  
   <div id="img-bck">
    <div id="cartes"> <img src="img/programme/arts_divinatoire.png" alt="Arts divinatoires" id="imgg"> <img src="img/programme/medecine_naturelles.png" alt="Medecines naturelles" id="imgcenter"> <img src="img/programme/conf_ateliers.png" alt="Conférences et ateliers" id="imgd"> </div>
    <div id="text-prog">
     <div class="txt txt-med" id="div_txt_imgcenter">
      <h2>Médecines <br> Naturelles</h2>
      <div class="desc">
       <p>Les médecines naturelles et alternatives permettent de retrouver parmi les psychothérapeutes présents, différentes méthodes telles que l’équilibre énergétique, les thérapies psycho-corporelles, le développement personnel, la sophrologie, le magnétisme, l’hypnose, le Feng Shui, le massage, le reiki ou encore la cristallomancie et la géobiologie.</p>
      </div>
     </div>
     <div class="txt txt-art" id="div_txt_imgg">
      <h2>Arts <br> divinatoires</h2>
      <div class="desc">
       <p>Les parapsychologues venus des quatre coins de France et d’Europe mettront au service d’une consultation leur don de voyance et celui es arts divinatoires par le biais des tarots, cartes, astrologie, pendule, boule de cristal, lignes de la main, numérologie, cauris, géomancie, rhunes, marc de café, tâches d’encre, voyance directe et sur photos, spiritisme…</p>
      </div>
     </div>
     <div class="txt txt-conf" id="div_txt_imgd">
      <h2>Conférences <br> & ateliers</h2>
      <div class="desc">
       <p>Des conférences, des débats, des ateliers d’initiation, sont proposées toutes les heures par les spécialistes des sciences parallèles qui nous feront entrer dans le monde de l’au-delà, de la réincarnation, des vies antérieures, des anges gardiens, de la transcommunication, des contacts spirites ou encore celui des ovnis, des extraterrestres et des nouvelles valeurs du bien-être. </p>
      </div>
     </div>
    </div>
   </div>


JS 
 
 $("#div_txt_imgg").hide();
 $("#div_txt_imgd").hide();
 
 $('#imgg').click(function () {
  switchImg('imgg', 'imgcenter');
 });
 $('#imgd').click(function () {
  switchImg('imgd', 'imgcenter');
 });

 function switchImg(id_img1, id_img2) {
  var img1_src = $("#" + id_img1).attr('src');
  var img1_alt = $("#" + id_img1).attr('alt');
  var img2_src = $("#" + id_img2).attr('src');
  var img2_alt = $("#" + id_img2).attr('alt');
  
  $("#" + id_img1).attr('src', img2_src);
  $("#" + id_img1).attr('alt', img2_alt);
  $("#" + id_img2).attr('src', img1_src);
  $("#" + id_img2).attr('alt', img1_alt);
  
  $("#div_txt_"+id_img1).show();
  $("#div_txt_"+id_img2).hide();
  
 }


EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45
0
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
Ah je n'étais pas au courant désolé !
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Petite amélioration : 

$("#div_txt_imgg").hide();
 $("#div_txt_imgd").hide();
 
 $('#imgg').click(function () {
  switchImg('imgg', 'imgcenter');
 });
 $('#imgd').click(function () {
  switchImg('imgd', 'imgcenter');
 });

 function switchImg(id_img1, id_img2) {
  var img1_src = $("#" + id_img1).attr('src');
  var img1_alt = $("#" + id_img1).attr('alt');
  var img2_src = $("#" + id_img2).attr('src');
  var img2_alt = $("#" + id_img2).attr('alt');
  
  $("#" + id_img1).attr('src', img2_src);
  $("#" + id_img1).attr('alt', img2_alt);
  $("#" + id_img2).attr('src', img1_src);
  $("#" + id_img2).attr('alt', img1_alt);
  
//on masque toutes les div ayant la class txt
  $("div.txt").hide();
//on affiche la div voulue
  $("#div_txt_"+id_img1).show();

  
 }
0
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Ca fonctionne un peu mieux mais ça ne marche que pour un tour donc si je clique sur mon imgg elle se place bien au centre avec le texte correspondant si j'appuie ensuite sur imgd pareil elle se place bien avec le texte correspondant mais si je reclique sur imgg le texte qui s'affiche ne correspond plus et la div txt-imgcenter n'apparaiit à aucun moment.

C'est comme si on lui avait dis quand on clique a gauche c'est txt-imgg qui s'affiche et à droite txt-imgd mais à quel moment on peut lui faire comprendre que c'est txt-imgcenter qui doit s'afficher quand l'image correspondante est au centre ?
0
Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   > Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 
C'est pour ça que j'avais pensé à identifié l'attribut src de l'image qui es au centre et afficher le texte correspondant
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Maagskull Messages postés 25 Date d'inscription   Statut Membre Dernière intervention  
 

C'est comme si on lui avait dis quand on clique a gauche c'est txt-imgg qui s'affiche et à droite txt-imgd mais à quel moment on peut lui faire comprendre que c'est txt-imgcenter qui doit s'afficher quand l'image correspondante est au centre ?

Par défaut .. tu dois avoir , lorsque tu affiches ta page, tout ce qui concerne imgcenter d'affiché.

A la limite.. tu peux avoir un code qui ressemble à ça 
//par défaut .. masque tous les texte et ne réaffiche que celui correspondant à l'image centrale
$("div.txt").hide();
$("#div_txt_imgcenter").show();

 $('#imgg').click(function () {
  switchImg('imgg', 'imgcenter');
 });

 $('#imgd').click(function () {
  switchImg('imgd', 'imgcenter');
 });

 function switchImg(id_img1, id_img2) {
  var img1_src = $("#" + id_img1).attr('src');
  var img1_alt = $("#" + id_img1).attr('alt');
  var img2_src = $("#" + id_img2).attr('src');
  var img2_alt = $("#" + id_img2).attr('alt');
  
  $("#" + id_img1).attr('src', img2_src);
  $("#" + id_img1).attr('alt', img2_alt);
  $("#" + id_img2).attr('src', img1_src);
  $("#" + id_img2).attr('alt', img1_alt);
  
//on masque toutes les div ayant la class txt
  $("div.txt").hide();
//on affiche la div voulue
  $("#div_txt_"+id_img1).show();

  
 }
0

Discussions similaires

Colis shein terminal fret
Lele -
bazfile -

1 réponse