Menu lien A href=vers contenu div

Version imprimable

19/03/2012, 08h30
isaric

Menu lien A href=vers contenu div
Bonjour,

J'ai un "menu" et un "contenu" comme sur cette page : Div et CSS : une mise en page rapide et facile

Dans le menu sont installés des liens A href=...
A href=...1... Page 1
A href=...2... Page 2
<A href="image8.jpg" target="contents" >Page 8</a><br />
A href=...X... Page X
comment faire apparaître dans le "contenu" l'image du lien
image 1, 2, 8 ou X en fonctions de celui sélectionné.

Que faut-il mettre dans
Code:

1 2 3 <div id="Contenu"> <img src="image1.jpg" /><br /> </div>
Un peut comme ce model en java, mais avec seulement un menu à la place des images de gauche.
D'avance merci.

Je sais pas si j'ai bien compris mais un petit code javascript du genre:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html lang='fr'> <head> <meta charset='utf-8'> <script> function apparait(id) { document.getElementById(id).style.display='block' } </script> </head> <h1>apparition d'images</h1> <A href="image8.jpg" target="contents" onclick="apparait('idContent')">Page 8</a><br /> <div id="Contenu" id='idContent' style="display:none;"> <img src="image1.jpg" /><br /> </div> </body> </html>
Ce n'est qu'une idée parmis d'autres solutions.
Ou alors :
Code:

1 2 3 4 <style> a:hover {display:block;} </style>
PS: Il faut être plus précis quand tu pose des questions si tu espère avoir des réponses.

Merci Luke spywoker pour tes propositions. Le lien s'ouvre dans un nouvel onglet, je voudrai qu'il s'ouvre dans le "Menu" avec l'image 1 (page 1) installé par défaut lorsqu'on arrive sur cette page sans avoir rien cliquer.

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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="style_pages.css" type="text/css" />
 
 
<script>
function apparait(id) {
  document.getElementById(id).style.display='block'
}
</script>
</head>
 
<body>
 
 
<div id="Bandeau">
		<h1>apparition d'images</h1>
	</div>
 
<div id="Menu">
<A href="1-pages-001.jpg" target="contents" onclick="apparait('idContent')">Page 1</a><br />
<A href="1-pages-008.jpg" target="contents" onclick="apparait('idContent')">Page 8</a><br />
	</div>
 
<div id="Contenu" id='idContent' style="display:none;">
<img src="1-pages-001.jpg" /><br />
</div>
 
 
<div id="pied_page">
<br />
</div>
 
 
</body>
</html>

style_pages.css :

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
div {
	text-align:center;
	}
div#Bandeau {
	width:100%;
	height:40px;
	}
 
div#Menu {
	text-align:left;
	position:fixed;
	overflow:auto;
	width:89px;
	height:200px;
	}
 
div#Contenu {
	float:left;
	width:50%;
	height:50%;
	margin: 0px 0px 0px 89px;	
	}
 
div#pied_page {
	clear:both;
	width:100%;
	height:1px;
	}

Salut Isaric,

LA solution est bonne mais tu devrais écrire:

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="Menu">
<A href="#" target="contents" onclick="apparait('idContent1')">Page 1</a><br />
<A href="#" target="contents" onclick="apparait('idContent2')">Page 8</a><br />
	</div>
 
<div id="Contenu" id='idContent1' style="display:none;">
<img src="1-pages-001.jpg" /><br />
</div>
<div id="Contenu" id='idContent2' style="display:none;">
<img src="1-pages-008.jpg" /><br />
</div>

L'attribut href définit la page qu'ouvrira le lien; "#" signifie que pointe vers ta page.

Merci tigunn
-Edit -

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
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="style_pages.css" type="text/css" />
 
 
<script>
function apparait(id) {
  document.getElementById(id).style.display='block'
}
</script>
</head>
 
<body>
 
<div id="Bandeau">
		<h1>apparition d'images</h1>
	</div>
 
 
 
<div id="Menu">
<A href="#" onclick="apparait('Contenu1')">Page 1</a><br />
<A href="#" onclick="apparait('Contenu2')">Page 8</a><br />
	</div>
 
 
<div id='Contenu1' style="display:none;">
<img src="1-pages-001.jpg"  /><br />
</div>
<!-- -->
<div id='Contenu2' style="display:none;">
<img src="1-pages-008.jpg" /><br />
</div>
<!-- -->
 
<div id="pied_page">
<br />
</div>
 
 
</body>
</html>

- Cela ouvre les pages les une au dessous des autres, j'aimerai que lorsque je clique sur la 5 en ensuite la 3, cela remplace la 5 par la 3.
- Sans avoir cliqué, à l'ouverture de la page d'accueil, arriver à la page 1 (un peu comme lorsque j'enlève style="display:none;" à la première ligne).

Merci à vous, avec une mixture du lien du premier poste et vos commentaires :

Code:

1
2
3
4
5
6
7
8
9
10
 
 
<A href="#" Title= "Page 1" onmouseover="ChangeImage('1-pages-000');">1-Page 1</a><br />
...
<A href="#" Title= "Page 8" onmouseover="ChangeImage('1-pages-007');">1-Page 8</a><br />
....
 
<div id="affiche-image" >
<img src="1-pages-000.jpg" Title= "page 1" /><br />
</div>

dans le head

Code:

1
2
3
4
5
6
<script type="text/javascript">
var ChangeImage = function ChangeImage(Url)
{
document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
</script>