Bonjour à tous,

Citation Envoyé par danielhagnoul Voir le message
Bonsoir

Sans le JavaScript il n'y a pas de jQuery et pas d'animation. Donc...

La lourdeur est au niveau de la conception de la page dans sa totalité. Alors qu'il n'y a de la place que pour une image à la fois dans la division ayant la classe articles on réserve de la place à coups de divisions pour trois.

Une page web doit être un ensemble harmonieux, si votre code HTML et CSS est inutilement complexes les méthodes JavaScript le seront probablement aussi.

Il faudrait reprendre cette page à partir de zéro; mais je n'ai pas le temps pour cela.
Mais je ne sais pas comment faire pour alléger ma page est avoir un code plus claire selon les consignes de Daniel Hagnoul.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Tab verticales</title> 
	<meta name="description" lang="fr" content="Essais de tabs verticales accessibles avec jquery" /> 
	<style type="text/css" media="screen"> 
		body {
			font-size: 90%;
			font-family: arial, helvetica, sans-serif;
		}
		h1 {text-align: center; color: #f00;}
		h3 {
		text-align: left;
		color: #f00;
		font-size: 12px;
	}
	.articles {
		position : relative;
		border: 1px solid #000;
		width: 352px; height : 123px;
	}
		.articles h3, .articles h3 a {color: #ebfff3; }
		/*.hasJS .articles {min-height:200px;}*/
		.hasJS .articles h3 {
			cursor: pointer;
			background-color: #36425a;
			margin: 0;
			padding: 5px;
			border-bottom:  #fff 1px solid;
			border-right:  #fff 1px solid;
			width:190px;
			height:30px;
		}
		.hasJS .articles h3.selected {
		background-color: #7385a3;
		border-right: #fff 1px solid;
		border-bottom: #fff 1px solid;
 
	}
 
 
		.hasJS .articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
		.hasJS .articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
		.imag {	width:150px; height:122px;}
		a:link, a:visited, a:active{text-decoration: none;color: #333333;}
	</style> 
	<script type="text/javascript"> 
                document.documentElement.className+=" hasJS";
        </script> 
</head> 
<body> 
	<h1>Tab verticales</h1> 
	<h2>Une série de h3 en tab horizontales</h2> 
	<div id="articles_1" class= "articles"> 
		<div class="article"> 
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3> 
			<div class="montre"> 
				<img class="imag"src="news1.jpg" alt="Figure 1" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3> 
			<div> 
				<img class="imag" src="news2.jpg" alt="Figure 2" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3> 
			<div> 
				<img class="imag" src="news3.jpg" alt="Figure 3" /> 
			</div> 
		</div> 
	</div> 
	<br /><br /> 
	<div id="articles_2" class= "articles"> 
		<div class="article"> 
			<h3 class="selected"><a href="#">Massacre aux Philippines: le clan a tué 200 autres personnes</a></h3> 
			<div class="montre"> 
				<img class="imag"src="news1.jpg" alt="Figure 1" /> 
			</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis
			suivent</a></h3> 
			<div> 
				<img class="imag" src="news2.jpg" alt="Figure 2" /> 
		</div> 
		</div> 
		<div class="article"> 
			<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3> 
			<div> 
				<img class="imag" src="news3.jpg" alt="Figure 3" /> 
			</div> 
		</div> 
	</div> 
 
	<script charset="utf-8" src="jquery-1.6.min.js"></script>
	<script type="text/javascript"> 
        $(function(){
            $(".article").children("h3").mouseenter(function(){
                var objParentArticles = $(this).closest(".articles");
                
                objParentArticles.find("div.montre").removeClass("montre");
                objParentArticles.find("h3.selected").removeClass("selected");
                
                $(this).next("div").addClass("montre");
                $(this).addClass("selected");
            });
        });
        </script> 
</body> 
</html>
Merci d'avance.