Signaler

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

Posez votre question Maagskull 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention - Dernière réponse le 23 août 2017 à 19:27 par Maagskull
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 !
Utile
+2
plus moins
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);
}


Cette réponse vous a-t-elle aidé ?  
Donnez votre avis
Utile
+1
plus moins
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 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention - 23 août 2017 à 19:27
Effectivement ça fonctionne à merveille ! Un grand merci Jordane !
Répondre
Donnez votre avis
Utile
+0
plus moins
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
Maagskull 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention - 22 août 2017 à 01:12
Je n'y arrive pas, franchement j'essaie mais je n'y arrive vraiment pas là je passe pour un gars qui veux un code tout fait or que j'essaie quoi
Répondre
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 22 août 2017 à 01:36
Poste ton code ici (pas sur jsfidle)
Je verrais demain
Répondre
Maagskull 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention - 22 août 2017 à 01:51
D'accord merci beaucoup !

Voila le html
   <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">
     <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_id_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">
     <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>


et le js

 $('#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);
  
 }
Répondre
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 22 août 2017 à 02:42
Dans ton HTML je ne vois qu'un seul ID
<div class="txt txt-art" id="div_txt_id_imgg">

Et que fais tu des deux autres div ?

Dans ton code JS .. je ne vois nul part les lignes de code que je t'ai donné pour afficher/masquer les div ... elles devraient se trouver dans la fonction switchImg ....

Je te laisse faire ces corrections et ensuite tu nous mets le code modifié si ça ne marche toujours pas.
Répondre
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 22 août 2017 à 02:45
par contre tu as fais une erreur. sur l'id !
id="div_txt_id_imgg"

les id seront de la forme div_txt_id_img où id_img est, comme son nom peut le laisser entendre ... l' ID de l'image. Donc : id="div_txt_imgg" , id="div_txt_imgd" , id="div_txt_imgcenter"
Répondre
Donnez votre avis
Utile
+0
plus moins
J'ai fait un jsfidle pour que tu vois mieux :
https://jsfiddle.net/6sh2d50c/
Donnez votre avis
Utile
+0
plus moins
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
Maagskull 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention - 22 août 2017 à 15:52
Non je veux dire que a l'affichage de la page il y a au centre l'image qui correspond aux medecines naturelles, au clique sur l'image a gauche (arts divinatoires) le texte correspondant se place bien au milieu. Au clique sur l image de droite (conférences et ateliers) le texte correspondant se place bien au milieu aussi mais une fois que je vais recliquer sur l'image correspondant aux medecines naturelles le texte n'apparait pas

J'ai publié une version en ligne pour que tu puisse tester ce que je viens de dire : www.hlassouli.be/parapsy

HTML
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="Lassouli">
	<meta name="description" content="Salon paraspy 2018. Salon des arts divinatoires et du bien être">
	<meta name="keywords" content="voyance, paris, bien-etre, ésoteriques, pendule, horoscope, ligne de la main, astrologie, medecines naturelles, conférences, stand, animations, arts divinatoires">
	<link rel="icon" type="image/png" href="img/favicon.png" />
	<title>Salon Parapsy 2018, salon des arts divinatoires et du bien être</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/odometer-theme-default.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,600" rel="stylesheet">
	<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /><![endif]-->
	<!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>

<body>
	<!-- Background particles -->
	<header id="header">
		<nav id="nav">
			<ul>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Accueil</a></li>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Présentation</a></li> <img src="img/logo.png" alt="logo" id="logo_acc">
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Programme</a></li>
				<!--<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Concours</a></li>-->
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Contact</a></li>
			</ul>
		</nav>
	</header>
	<div id="particles-js"></div>
	<section id="banner">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-5"> <img src="img/meditation.png" alt="meditation" id="img-medit"> </div>
				<div class="col-md-6">
					<div class="home">32 <sup>ème</sup> édition de Parapsy
						<br/>Espace Champerret - Paris 17ème
						<br/>Du 07 au 12 Février 2018
						<br/> </div>
					<div class="dynamic_txt cd-intro">
						<div class="barre-g"></div>
						<div class="cd-headline zoom"> <span class="cd-words-wrapper">
				<b class="is-visible">Voyance</b>
				<b>Astrologie</b>
				<b>Numérologie</b>
			</span></div>
						<div class="barre-d"></div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="global">
		<div id="presentation">
			<div class="barr-titre1" data-bottom="left:-120px" data-center-top=" left: 260px" ></div>
			<h1 data-bottom="opacity:0" data-center-top=" opacity: 1" data-top="opacity: 1" >Présentation</h1>
			<div class="barr-titre2" data-bottom="left:-120px" data-center-top=" left: 86px" ></div> <img src="img/video.png" alt="video" id="tstvideo">
			<div class="container-fluid" data-center=" opacity: 1" data-top="opacity: 1" data-bottom="opacity:0">
				<div class="row">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-1"> </div>
							<div class="col-md-5">
								<h2>le salon le plus atypique de France</h2>
								<div class="barre"></div>
								<div class="about">Intervenants et exposants, choisis pour leur sérieux et leur compétence, qui par le biais de consultations, de produits, de conférences ou d’ateliers vous feront découvir ou approfondir toutes les méthodes du bien-être et de la divination. Parapsy, c’est partir à la découverte de nouvelles valeurs par delà le standard institutionnel </div>
							</div>
							<div class="col-md-5">
								<h2>le salon du Corps et de l’Esprit</h2>
								<div class="barre"></div>
								<div class="about">Un dépaysement assuré dans une ambiance feutrée. Le temps s'arrête, l’espace se transforme en un lieu relaxant, tonifiant et mystérieux où se mélangent les parfums des huiles essentielles à ceux de l’encens et où chacun pourra vivre des sensations insolites et venir à la découverte de lui-même et des autres. </div>
							</div>
							<div class="col-md-1"> </div>
						</div>
					</div>
				</div>
			</div>
			<div id="chiffres">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12">
							<div class="row">
								<div class="col-md-4">
									<div class="number odometer">0</div>
									<div class="legende">Visiteurs en 2017</div>
								</div>
								<div class="col-md-4">
									<div class="number odometer odometer2">0</div>
									<div class="legende">m² d’exposants et de consultants</div>
								</div>
								<div class="col-md-4">
									<div class="number odometer odometer3">0</div>
									<div class="legende">Voyants présents</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="programme">
			<div class="barr-titre3" data-bottom="left:-120px" data-center-top=" left: 224px"></div>
			<h1 data-bottom="opacity:0" data-center-top=" opacity: 1" data-top="opacity: 1">Programme</h1>
			<div class="barr-titre4" data-bottom="left:-120px" data-center-top=" left: 86px"></div>
			<div id="img-bck">
				<div id="cartes"> 
				<img src="img/programme/arts_divinatoire.png" alt="Arts divinatoires" id="imgg" data-bottom="right:500px" data-center-top=" right: 300px"> <img src="img/programme/medecine_naturelles.png" alt="Medecines naturelles" id="imgcenter" data-bottom="top: 10px" data-center-top="top:500px"> <img src="img/programme/conf_ateliers.png" alt="Conférences et ateliers" id="imgd" data-bottom="left:490px" data-center-top="left: 300px"> </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_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>
		<div id="concours">
			<div class="barr-titre7" data-bottom="left:-120px" data-center-top=" left: 185px"></div>
			<h1 data-bottom="opacity:0" data-center-top=" opacity: 1" data-top="opacity: 1">Concours</h1>
			<div class="barr-titre8" data-bottom="left:-120px" data-center-top=" left: 86px"></div>
		</div>
		<div id="contact">
			<div class="barr-titre5" data-bottom="left:-120px" data-center-top=" left: 185px"></div>
			<h1 data-bottom="opacity:0" data-center-top=" opacity: 1" data-top="opacity: 1">Contact</h1>
			<div class="barr-titre6" data-bottom="left:-120px" data-center-top=" left: 86px"></div>
			<div id="map"></div>
			<script>
				function initMap() {
					var myLatLng = {
						lat: 48.88664499999999
						, lng: 2.28908899999999
					};
					var map = new google.maps.Map(document.getElementById('map'), {
						zoom: 17
						, scrollwheel: false
						, center: myLatLng
						, styles: [{
							"featureType": "all"
							, "elementType": "labels.text.fill"
							, "stylers": [{
								"color": "#ffffff"
							}]
						}, {
							"featureType": "all"
							, "elementType": "labels.text.stroke"
							, "stylers": [{
								"color": "#000000"
							}, {
								"lightness": 13
							}]
						}, {
							"featureType": "administrative"
							, "elementType": "geometry.fill"
							, "stylers": [{
								"color": "#000000"
							}]
						}, {
							"featureType": "administrative"
							, "elementType": "geometry.stroke"
							, "stylers": [{
								"color": "#144b53"
							}, {
								"lightness": 14
							}, {
								"weight": 1.4
							}]
						}, {
							"featureType": "landscape"
							, "elementType": "all"
							, "stylers": [{
								"color": "#08304b"
							}]
						}, {
							"featureType": "poi"
							, "elementType": "geometry"
							, "stylers": [{
								"color": "#0c4152"
							}, {
								"lightness": 5
							}]
						}, {
							"featureType": "road.highway"
							, "elementType": "geometry.fill"
							, "stylers": [{
								"color": "#000000"
							}]
						}, {
							"featureType": "road.highway"
							, "elementType": "geometry.stroke"
							, "stylers": [{
								"color": "#0b434f"
							}, {
								"lightness": 25
							}]
						}, {
							"featureType": "road.arterial"
							, "elementType": "geometry.fill"
							, "stylers": [{
								"color": "#000000"
							}]
						}, {
							"featureType": "road.arterial"
							, "elementType": "geometry.stroke"
							, "stylers": [{
								"color": "#0b3d51"
							}, {
								"lightness": 16
							}]
						}, {
							"featureType": "road.local"
							, "elementType": "geometry"
							, "stylers": [{
								"color": "#000000"
							}]
						}, {
							"featureType": "transit"
							, "elementType": "all"
							, "stylers": [{
								"color": "#146474"
							}]
						}, {
							"featureType": "water"
							, "elementType": "all"
							, "stylers": [{
								"color": "#021019"
							}]
						}]
					});
					var icon = {
						url: "http://rpicp.com/wp-content/uploads/2017/04/venue-icon.png"
						, scaledSize: new google.maps.Size(60, 50), // scaled size
					};
					var marker = new google.maps.Marker({
						position: myLatLng
						, map: map
						, icon: icon
					, });
				}
			</script>
			<div class="container">
				<div class="row">
					<div class="row">
						<div class="col-md-1"></div>
						<div class="col-md-5">
							<p>Nous avons essayé en quelques lignes de vous expliquer brièvement le salon PARAPSY,mais bien entendu si vous souhaitez des renseignements complémentaires ou nous faire part de vos suggestions, n'hésitez pas à nous contacter, nous sommes à votre entière disposition. </p>
						</div>
						<div class="col-md-2"> <img src="img/logo.png" alt="logo" id="logocontact"> </div>
						<div class="col-md-4 coord"><i class="fa fa-map-marker" aria-hidden="true"></i> Espace Champerret, Paris 17ème
							<br> <i class="fa fa-phone fa-1x" aria-hidden="true"></i> 04 72 76 24 21
							<br><i class="fa fa-envelope" aria-hidden="true"></i> atb.parapsy@wanadoo.fr </div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- Scripts -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<!-- Google maps -->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF-NTg4wIILWLuRpfbF3KfpWUdIKnKo-w&callback=initMap" async defer></script>
	<!-- Background animé -->
	<script src="js/particles.js"></script>
	<script src="js/app.js"></script>
	<!-- Texte dynamic -->
	<script src="js/ressource.js"></script>
	<!-- Compteur chiffres -->
	<script src="js/odometer.js"></script>
	<script src="js/main.js"></script>
	<!-- Skrollr Parralax -->
	<script type="text/javascript" src="js/skrollr.js"></script>
</body>

</html>


JS
$(document).ready(function () {
	/* INITIAL SKROLLR */
	var s = skrollr.init();
	/* CHIFFRES COMPTEURS*/
	var posChiffres = false;
	$(document).scroll(function () {
		if ($(document).scrollTop() > 1270) {
			if (!posChiffres) $('.odometer').html('13932');
			$('.odometer2').html('2500');
			$('.odometer3').html('90');
			posChiffres = true;
		}
		else {
			posChiffres = false;
		}
	});
	/*PROGRAMME CARTES*/

$("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);
  
  $("div.txt").hide();
  $("#div_txt_"+id_img1).show();

  
 }
});
Répondre
Maagskull 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention jordane45 - 23 août 2017 à 14:43
Tu vois ce que je veux dire?
Répondre
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 23 août 2017 à 14:52
oui oui je vois bien
Répondre
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 23 août 2017 à 14:58
Je pense qu'en effet, le mieux serait de passer par un data attribute.
par exemple :

 <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érences et ateliers" id="imgd" data-txt="div_txt_conferences"> > 
 </div>
 


Au niveau de tes zones de textes, modifier les ID pour qu'ils correspondent aux id écrits dans les data-txt
par exemple :
 <div class="txt txt-med" id="div_txt_medecines">
 
 
 


Puis dans le JS
 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).data('txt');
  var id_txt2 = $("#"+id_img2).data('txt');

  $("#" + id_img1).attr('src', img2_src);
  $("#" + id_img1).attr('alt', img2_alt);
  $("#" + id_img2).data('txt',id_txt2);
  $("#" + id_img2).attr('src', img1_src);
  $("#" + id_img2).attr('alt', img1_alt);
  $("#" + id_img2).data('txt',id_txt1);
 //on masque toutes les div ayant la class txt
  $("div.txt").hide();
  

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

 }
 



PS: Faire des "UP" à base de "bonjour" ou de "tu vois ?" ..... ça ne sert à rien à part polluer inutilement la discussion.
Je (et les autres personnes du forum également....) répond lorsque j'en ai le temps et l'envie..... ça ne me fera pas aller plus vite.
Répondre
Maagskull 19Messages postés lundi 21 août 2017Date d'inscription 23 août 2017 Dernière intervention - 23 août 2017 à 15:17
Ca me fait toujours pareil que la solution d'avant..

(Je suis désolé pour les up je dois remettre ce projet dans 2 jours et j'ai personne pour m'aider à résoudre ce problème, généralement j'arrive à me débrouiller en recherchant sur internet mais la ça me donne vraiment du fil a retordre...)
Répondre
Donnez votre avis
Utile
-1
plus moins
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 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 21 août 2017 à 22:57
N'oublies pas de mettre le sujet en resolu.
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !