Changer le contenu sans changer la page?!

**batnoir** · 29/09/2009, 20h22

Bref, voilà... Je fais une page web pour ma petite copine.

J'ai fait un menu en haut de la page avec divers liens... bien sur je pourrais tout faire en html et changer de page à chaque fois pour tomber sur une autre page avec des photos différentes répondant à chaque lien (ex: des photos d'arbres pour le lien forêt(foret.html), des photos de cours d'eau pour le lien océan(ocean.html))... mais ça.... c pas assez professionnel .

Alors moi, qui aime me casser la tête, j'ai décidé de le faire en javascript bien que je suis totalement nouveau à ce langage XD!

Or, pour ce faire, je sais que je dois entrer un code plutôt ardu
Mais ce code je ne le connais pas!!!!

À la fin.... je veux pouvoir cliquer sur chaque lien... que les photos changent automatiquement mais que la page reste la meme(disons que la page est Index.html..... elle va le rester meme si je clique sur nimporte quel lien. Seules les photos d'arbustes ou de cours d'eau changeront)... qu'il n'y ait aucun ajout dans la barre d'adresse et tout sa. Qqun sait comment?!

Je sais meme pas par où commencer *sigh*....

Voila mon code html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Perversity isn't meaning of Insanity ;)!</title>
    <link rel="stylesheet" media="screen" type="text/CSS" title="Sexy" href="Sexy.css">
      <script type="text/javascript" src="Sexy.js"></script>
  </head>
 
  <body background="http://www.lovalley.co.cc/Images/SexyBg.jpg">
    <h1>My Sexual Addiction! :P</h1>
      <div id="menu">
        <table>
          <tr>
            <td width="150px"><a href="#" onclick="arbre();">Foret</a></td>
            <td width="204px"><a href="#" onclick="ocean();">Cours d'eau</a></td>
            <td width="200px"><a href="#" onclick="animaux();">Ecosysteme </a></td>
            <td width="190px"><a href="#" onclick="bio();">Biomasse</a></td>
            <td width="40px"><a href="#" onclick="agri();">Agriculture</a></td>
          </tr>
        </table>
      </div>
        <div id="corps">
          <table border=1>
            <tr height="200px" align=center>
              <td id="i1" width="195px">&nbsp;</td>
              <td id="i2" width="195px">&nbsp;</td>
              <td id="i3" width="195px">&nbsp;</td>
              <td id="i4" width="195px">&nbsp;</td>
            </tr>
                <tr height="200px" align=center>
                  <td id="i5" width="195px">&nbsp;</td>
                  <td id="i6" width="195px">&nbsp;</td>
                  <td id="i7" width="195px">&nbsp;</td>
                  <td id="i8" width="195px">&nbsp;</td>
                </tr>
                   <tr height="200px" align=center>
                     <td id="i9" width="195px">&nbsp;</td>
                     <td id="i10" width="195px">&nbsp;</td>
                     <td id="i11" width="195px">&nbsp;</td>
                     <td id="i12" width="195px">&nbsp;</td>
                   </tr>
          </table>
        </div>
  </body>
</html>

(OUI les noms des liens ont été modifiés XD.. C'est pour ma petite copine alors vous avez pu convenir qu'il ne s'agit pas de culture générale XD!)

code javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function arbre(){
 
 
}
 
function ocean(){
 
 
}
 
function animaux(){
 
 
}
 
function bio(){
 
 
}
 
function agri(){
 
 
}