Bonjour tout le monde,

Je suis entrain de créer un site web en HTML pour ma propre utilisation donc qui restera en local.

Ce site est composé de deux pages : 1 concernant la page principal et l'autre une autre que l'on obtient en cliquant sur le lien 'Notre rencontre'.

Voici le code de la page principal :
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="js/prototype.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	function construct() 
	{ 
		var tableLiens = $$('.back a.liaison'); 
		for(j=0; j<tableLiens.length; j++) 
		{ 
			var lien = tableLiens[j].readAttribute('href'); 
			lien = lien.substring(lien.lastIndexOf('/')+1); 
			tableLiens[j].removeAttribute('href'); 
			if(lien == "index.html") 
			{ 
				lien = "main.html"; 
			} 
				tableLiens[j].writeAttribute('href_bis', lien); 
				tableLiens[j].observe('click', charger); 
		} 
	} 
 
	function charger(e) 
	{ 
		var el = e.element(); 
		var url = el.readAttribute('href_bis'); 
		new Ajax.Request(url, { onComplete: function(xhr) { $('middle_back').innerHTML = xhr.responseText; } }); 
	} 
	document.observe('dom:loaded', construct); 
</script>
<script type="text/javascript" src="js/calendrier_2.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="main">
<div id="inner">
<!-- start header -->
<div id="header">
 
 <div id="logo">
	<h1>metamorph_innerlight</h1>
	<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  <div id="menu">
	  <ul>
	   <li><a href="index.html">Accueil</a></li>
	   <li><a href="#">Products</a></li>
	   <li><a href="#">Support</a></li>
	   <li><a href="#">About</a></li>
	   <li><a href="#">Contact</a></li>   
	  </ul>
</div>
<!--Header end -->
 
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start leftbar -->
	<div id="leftbar" class="sidebar">
			<h2>Liens</h2>
			 <div class="back">
				<ul>
					<li><a href="notre_rencontre.html" class="liaison">Notre rencontre</a></li>
					<li><a href="#">Suspendisse mauris</a></li>
					<li><a href="#">Urnanet non semper</a></li>
					<li><a href="#">Proin porttitor</a></li>
				</ul>
				</div>
				<div class="bottom_small"></div>
				<h2>Calendrier</h2>
				<div class="back">
					<center>
						<script type="text/javascript">	
							calendrier();
						</script>
					</center>
				</div>
			<div class="bottom_small"></div>
	</div>
	<!-- end leftbar -->
	<!-- start content -->
	<div id="content">
		<div class="post">
		     <div class="top"></div>
			 <div id="middle_back">
				<center> 
					<table> 
						<tr> 
							<td> 
								<p> Toi et moi 
								 un amour
								&eacute;ternel </p> 
							</td> 
							<td> 
								<img src="image/nous.jpg" /> 
							</td> 
							<td> 
								&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
								<p> Toi et moi
								 pour la vie 
								 je l'esp&egrave;re.   </p>
							</td> 
						</tr> 
					</table> 
				</center> 
			</div>			  
		</div>
	</div>
		<!-- end rightbar -->
	<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page --> 
</div>
<div id="footer">
   <p>Copyright &copy; 2009. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
	<p><a href="http://www.metamorphozis.com/" title="Website Design">Website Design</a> by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a></p>
</div>
</div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>
Voici le code de la seconde page :
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
<link href="CSS/notre_rencontre.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"> 
	function AfficheMaxi(a)
	{
		document.getElementById('ZonePrMaxi').src = '../image/NotreRencontre/'+a;
	}
</script>
<div id="image_clignotant">
	<img src="image/Titre_clignotant.gif"/>
</div>
<table border="1" align="center">
  <tr>
    <td id="img_menu">
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('Marie Pineau.jpg')"><img src="image/NotreRencontre/Marie Pineau.jpg" width="100" height="80" alt="Ma puce" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('ptite foto au park.jpg')"><img src="image/NotreRencontre/ptite foto au park.jpg" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('ma puce.jpg')"><img src="image/NotreRencontre/ma puce.jpg" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('image10.jpg')"><img src="image/NotreRencontre/image10.jpg" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('Image 2.jpg')"><img src="image/NotreRencontre/Image 2.jpg" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('mi lyc&eacute;.bmp')"><img src="image/NotreRencontre/mi lyc&eacute;.bmp" width="100" height="80" alt="elle" /></a><br/>
	</td>
	<td width="500" height="300" align="center">
		<img id="ZonePrMaxi" src="image/NotreRencontre/Marie Pineau.jpg" alt="" width="400" height="300" />
	</td>
	<td id="img_menu">
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('moi + casque.jpg')"><img src="image/NotreRencontre/moi + casque.jpg" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('149753303.jpg')"><img src="image/NotreRencontre/149753303.jpg" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('100_0518.JPG')"><img src="image/NotreRencontre/100_0518.JPG" width="100" height="80" alt="elle" /></a>
	</td>
  </tr>
</table>
<embed src="music/Anais-MonCoeuMonAmour.mp3" autostart="true" loop="1" hidden="true"></embed> 
Lorsque je t'es vu sur ce blog, mon coeur s'est emball&eacute; soudainement par ta beaut&eacute; fatale!!
Mon problème qui a lieu sur la deuxième page :
Voilà je souhaiterais que lorsque je glisse ma souris sur les imagettes, elles s'affichent au centre mais la avec ce code j'ai la première image qui s'affiche au centre quand j'arrive sur cette page (jusqu'ici c'est normal) mais lorsque je glisse ma souris sur les autres imagettes rien ne se passe.

Comment je peux faire pour afficher les imagettes au centre lorsque je glisse ma souris??

Merci d'avance pour votre aide!!