afficher imagette au centre

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:

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:

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!!

Vraiment besoin d'aide

Bonjour tout le monde,

Je trouve vraiment pas comment faire.
Comment puis-je faire pour utiliser le JavaScript dans ma page 'Notre_Rencontre.html'????

Cordialement

Salut,
pour executer du jvs sans ta seconde page, il faut respecter la structure des page html.
A savoir <html></html> et utilisation des balises <head></head> et <body></body> ta ou tes fonctions kvs devant être entre les balise <head></head> comme sur ta première page en fait.

réponse à Vil'Coyote

Merci pour ta réponse.

Sur le principe je suis d'accord avec toi mais vu que j'ai utilisé la méthode suivante : http://4code.fr/api-topicList/20
Et qu'un moment il dise cela :

Citation:

Par contre, vous l'aurez compris, la réponse reçu par la fonction Ajax étant directement injectée dans notre div#content, nous ne pouvons nous retrouver avec des balises <body><head> ou autre !!

Cela me bloque, comment faire??

Cordialement

Bonjour!

Je vais peut-être dire une bêtise, mais tout de même, je me lance.

As-tu essayé en insérant un

Code:

defer="defer"

dans ta balise Javascript?

Donc

Code:

<script src="js/prototype.js" type="text/javascript" defer="defer"></script>

Ajoute-le également sur ton autre balise Javascript.

Qu'est-ce que ça fait? En gros, avec cet attribut, ton navigateur attendra que l'entièreté du code de ta page soit chargé avant de charger tes fichiers javascript et de les initialiser (fonction onload, toussa).

'sais pas, mais j'me dit que ton problème vient peut-être de là.

Sinon, tu as essayé de poster sur le forum AJAX et/ou Javascript?

Bonne continuation. ;)

réponse à BnA

Merci à toi pour ta réponse mais cela fonctionne toujours pas.

Je me demande ou je dois mettre la fonction JavaScript plus précisément dans la page 'Notre_rencontre.html' où dans la page 'Index.html'??

Si je la met dans 'Notre_rencontre.html' et que je glisse ma souris sur une imagette, rien se passe par contre si je met la fonction JavaScript dans 'index.html' et que je glisse ma souris sur une imagette ça me retire l'image de départ.

Que Faire????

Cordialement!!

Bonjour,

J'ai enfin résolu mon problème en mettant la fonction javascript ('AfficheMaxi') dans la page 'index.html'.
Et au lieu de :

Code:

<script type="text/javascript"> function AfficheMaxi(a) { document.getElementById('ZonePrMaxi').src = '../image/NotreRencontre/'+a; } </script>

j'ai mis :

Code:

function AfficheMaxi(a) { document.getElementById('ZonePrMaxi').src = 'image/NotreRencontre/'+a; }

Cordialement.