Flèche changeant une page

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Flèche changeant une page

Message par xCRY le Mar 16 Avr 2013 - 22:50

Bonjour, Bonsoir ou... Bon Appetit? xD

Bon je ne suis pas très très bonne en explication, mais je vais essayer:
Je voudrais en faites faire une page et autour deux flèches, et quand on clique sur une flèche, que le tableau change..
Je sais, l'explication est nul, donc je vais expliquer en image:



Et dès qu'on clique sur la flèche 1 ça donne ça:



Et qu'on on clique sur la flèche 2, ça nous fait revenir vers le tableau 1..

J'espère que j'ai été assez claire dans mes explications, et désolé du dérangement! J'ai cherchée partout mais j'ai jamais trouvée.. Embarassed


Dernière édition par xCRY le Lun 22 Avr 2013 - 3:56, édité 1 fois

xCRY
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 16/04/2013

http://akb0048.forumgratuit.fr/
xCRY a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Flèche changeant une page

Message par xCRY le Mer 17 Avr 2013 - 23:29

Uuuuuup? ;-;

xCRY
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 16/04/2013

http://akb0048.forumgratuit.fr/
xCRY a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Flèche changeant une page

Message par xCRY le Ven 19 Avr 2013 - 13:22

Re Up? ;-;

xCRY
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 16/04/2013

http://akb0048.forumgratuit.fr/
xCRY a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Flèche changeant une page

Message par Arlem le Ven 19 Avr 2013 - 14:43

Bonjour,

Que souhaiterais-tu mettre dans ton tableau ?

Tu peux essayer avec ce code, à mettre où tu souhaites que le tableau apparaisse :
Code:
<img src="url_fleche_2" id="fleche2"><div id="switch_table" style="display:inline;">Contenu par défaut du tableau</div><img src="url_fleche_1" id="fleche1">
En remplaçant les url de tes deux flèches et le contenu par défaut (donc du tableau 1 j'imagine).
Puis dans la gestion des codes javascript, créé en un nouveau, sélectionne la case "actif sur" en fonction de où tu mets le tableau et mets ceci comme code :
Code:
$(function() {
   $('#fleche2').click(function() {
      $('#switch_table').html('Contenu du tableau 2');
   });
   $('#fleche1').click(function() {
      $('#switch_table').html('Contenu par défaut du tableau');
   });
});
Remplace dans ce code le contenu du tableau par défaut (tableau 1) et du tableau 2. Si dans ce code tu as des apostrophes à mettre, fais les précéder d'un anti-slash comme ceci : \' sinon ça fera tout planter. :3


Arlem
+ Hyperactif +

Messages : 2550
Inscrit(e) le : 30/06/2009

Arlem a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Flèche changeant une page

Message par xCRY le Ven 19 Avr 2013 - 15:27

Merci beaucoup c'est exactement ça!
En faites, c'est pour une P.A que je fais ça, mais j'ai encore une question, comment fait-on pour rajouter un troisième tableau?

xCRY
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 16/04/2013

http://akb0048.forumgratuit.fr/
xCRY a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Flèche changeant une page

Message par xCRY le Lun 22 Avr 2013 - 1:39

Again Up?

xCRY
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 16/04/2013

http://akb0048.forumgratuit.fr/
xCRY a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Flèche changeant une page

Message par mambo54321 le Lun 22 Avr 2013 - 2:48

J'aurais bien aimer t'aider avec son code mais je m'y connait pas beaucoup en php.
Par contre je pourrait te donner un code en script qui est un peut plus façil à comprendre.

1: Voila le code:

Code:
<body onload="showhide1(d1);">





<script type="text/javascript">

function hide(){
          d1.style.display = 'none',
          d2.style.display = 'none',
          d3.style.display = 'none',
          d4.style.display = 'none',
          d5.style.display = 'none';
}


function showhide1() {

      document.getElementById(d1);
      if(d1.style.display == 'block')
          hide();
      else
          d1.style.display = 'block',
          d2.style.display = 'none',
          d3.style.display = 'none',
          d4.style.display = 'none',
          d5.style.display = 'none';

    }

function showhide2() {
      document.getElementById(d2);
      if(d2.style.display == 'block')
          hide();
      else
          d1.style.display = 'none',
          d2.style.display = 'block',
          d3.style.display = 'none',
          d4.style.display = 'none',
          d5.style.display = 'none';
    }

function showhide3() {
      document.getElementById(d3);
      if(d3.style.display == 'block')
          hide();
      else
          d1.style.display = 'none',
          d2.style.display = 'none',
          d3.style.display = 'block',
          d4.style.display = 'none',
          d5.style.display = 'none';
    }

function showhide4() {
      document.getElementById(d4);
      if(d4.style.display == 'block')
            hide();
      else
          d1.style.display = 'none',
          d2.style.display = 'none',
          d3.style.display = 'none',
          d4.style.display = 'block',
          d5.style.display = 'none';
    }

function showhide5() {
      document.getElementById(d5);
      if(d5.style.display == 'block')
            hide();
      else
          d1.style.display = 'none',
          d2.style.display = 'none',
          d3.style.display = 'none',
          d4.style.display = 'none',
          d5.style.display = 'block';
    }


</script>



 

<center>


<!-- Tableau 1 -->
<div id="d1" class="dropContent1" style="display:none;">



<table cellspacing="0" cellpadding="0" width="100%" border="2">
   <tr>
      <td width="10%"></td>
      
<td width="80%">


TEXT 1.


</td>
      <td width="10%"><a href="#" onclick="showhide2(d2);">2</a></td>
   </tr>
</table>



</div>





<!-- Tableau 2 -->
<div id="d2" class="dropContent1" style="display:none;">



<table cellspacing="0" cellpadding="0" width="100%" border="2">
   <tr>
      <td width="10%"><a href="#" onclick="showhide1(d1);">1</a></td>
      
<td width="80%">


TEXT 2.


</td>
      <td width="10%"><a href="#" onclick="showhide3(d3);">3</a></td>
   </tr>
</table>


</div>


<!-- Tableau 3 -->
<div id="d3" class="dropContent1" style="display:none;">



<table cellspacing="0" cellpadding="0" width="100%" border="2">
   <tr>
      <td width="10%"><a href="#" onclick="showhide2(d2);">2</a></td>
      
<td width="80%">


TEXT 3.


</td>
      <td width="10%"><a href="#" onclick="showhide4(d4);">4</a></td>
   </tr>
</table>


</div>





<!-- Tableau 4 -->
<div id="d4" class="dropContent1" style="display:none;">



<table cellspacing="0" cellpadding="0" width="100%" border="2">
   <tr>
      <td width="10%"><a href="#" onclick="showhide3(d3);">3</a></td>
      
<td width="80%">


TEXT 4.


</td>
      <td width="10%"><a href="#" onclick="showhide5(d5);">5</a></td>
   </tr>
</table>


</div>






<!-- Tableau 5 -->
<div id="d5" class="dropContent1" style="display:none;">



<table cellspacing="0" cellpadding="0" width="100%" border="2">
   <tr>
      <td width="10%"><a href="#" onclick="showhide4(d4);">4</a></td>
      
<td width="80%">


TEXT 5.


</td>
      <td width="10%"></td>
   </tr>
</table>


</div>

</center>

</body>


mambo54321
*

Messages : 46
Inscrit(e) le : 15/11/2011

http://canard-jitsu.forum-servers.com
mambo54321 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Flèche changeant une page

Message par xCRY le Lun 22 Avr 2013 - 3:54

Merci beaucouuup! Je vais mettre résolu! Very Happy Encore Merci!

xCRY
Nouveau membre

Féminin
Messages : 8
Inscrit(e) le : 16/04/2013

http://akb0048.forumgratuit.fr/
xCRY a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum