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

Résolu/Fermé

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023 - Modifié le 21 août 2017 à 21:52
Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023 - 23 août 2017 à 19:27

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:

Récupérer une variable d'un attribut pour l'insérer autre part
Comment récupérer un compte facebook piraté - Guide
Comment recuperer un message supprimé sur whatsapp - Guide
Recuperer video youtube - Guide
Insérer signature word - Guide
Insérer une vidéo dans powerpoint - Guide

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
21 août 2017 à 22:41

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);
}

Réponse 2 / 6

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
23 août 2017 à 15:40

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>

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
23 août 2017 à 19:27

Effectivement ça fonctionne à merveille ! Un grand merci Jordane !

Réponse 3 / 6

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
21 août 2017 à 22:55

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 !

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
21 août 2017 à 22:57

N'oublies pas de mettre le sujet en resolu.

Réponse 4 / 6

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
Modifié le 21 août 2017 à 23:05

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
21 août 2017 à 23:17

Tu peux jouer avec la propriete display.

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023 > jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024
Modifié le 22 août 2017 à 00:22

Je dois faire un if et récupérer l'attribut Src et mettre en display celui qui correspond?

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");
	});

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649 > Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
22 août 2017 à 00:41


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();

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/

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 lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
21 août 2017 à 23:08

J'ai fait un jsfidle pour que tu vois mieux :
https://jsfiddle.net/6sh2d50c/

Réponse 6 / 6

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
Modifié le 22 août 2017 à 12:12

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>

 
 $("#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

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
22 août 2017 à 12:14

Ah je n'étais pas au courant désolé !

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
22 août 2017 à 12:14

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();

  
 }

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 ?

Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023 > Maagskull Messages postés 25 Date d'inscription lundi 21 août 2017 Statut Membre Dernière intervention 12 mars 2023
22 août 2017 à 12:27

C'est pour ça que j'avais pensé à identifié l'attribut src de l'image qui es au centre et afficher le texte correspondant

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();

  
 }

Discussions similaires

programme qui n'affiche pas le mot secret

Explications disponibles ici :ICI

Discussions similaires

Newsletters