Menu lien A href=vers contenu div

**isaric** · 19/03/2012, 08h30

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 :

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

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.

**Luke spywoker** · 19/03/2012, 17h53

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

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

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

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.

**isaric** · 20/03/2012, 08h49

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 :

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

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
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;
	}

**tigunn** · 20/03/2012, 10h23

Salut Isaric,

LA solution est bonne mais tu devrais écrire:

Code :

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

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.

**isaric** · 20/03/2012, 10h54

Merci tigunn
-Edit -

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

**isaric** · 20/03/2012, 13h58

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

Code :

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

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 :

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

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

Menu lien A href=vers contenu div

HTML

Vue hybride

Discussions similaires

Partager

Partager