Bonjour à tous,

Je développe un site avec un petit module d'accessibilité :
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
 
<div id="handicap" onmouseover="handi_onover();" onmouseout="handi_onout();">
<h1>accessibilité</h1>
<div id="handi_content">
<p>
<h2>Réglages des couleurs</h2>
<ul>
<li><a href="#" class="font_size" onclick="displayNB();">mode noir sur blanc</a></li>
<li><a href="#" class="font_size" onclick="displayBN();">mode blanc sur noir</a></li>
<li><a href="#" class="font_size" onclick="displayNormal();">mode normal</a></li>
</ul>
</p>
<p>
<h2>Réglages de la taille du texte</h2>
<ul>
<li><a href="#" class="font_size" onclick="incr_font_size();">grandir le texte</a></li>
<li><a href="#" class="font_size" onclick="restore_font_size();">taille normale</a></li>
<li><a href="#" class="font_size" onclick="decr_font_size();">rétrécir le texte</a></li>
</ul>
</p>
</div>
</div>
Ce module est régi par le script suivant :
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
var prefsLoaded = false;
var toggleNB = "normal";
var defaultFontSize = 13;
var currentFontSize = defaultFontSize;
var handi_isOpen = false;
//== ONLOAD ============================================================================
function init(){
	setUserOptions();
	lToTop = document.getElementById("to_top");
	placeToTop();
}
 
//== ONUNLOAD ==========================================================================
function finish(){
	saveSettings();
}
//== ONSCROLL ==========================================================================
window.onscroll = placeToTop;
 
//== GESTION DIV TO_TOP ================================================================
function placeToTop(){
	position = getScrollPosition();
	offset = getWindowHeight() - 75;
	targetPosition = position[1] + offset;
	marginTop = retire_px(lToTop.style.marginTop);
	if(targetPosition > marginTop){
		lToTop.style.marginTop = targetPosition + "px";
	}
	else if(targetPosition < marginTop){
		lToTop.style.marginTop = targetPosition + "px";
	}
	else{
		lToTop.style.marginTop = targetPosition + "px";
	}
}
function getScrollPosition() {
    return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);
}
function retire_px(texte){
        return texte.substring(0, texte.length-2);
}
function getWindowHeight() {
    var h = 0;
    if (typeof(window.innerHeight) == 'number') { // Netscape
        h = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        h = document.documentElement.clientHeight;
    } else if (document.body && document.body.offsetHeight) { //client
        h = document.body.offsetHeight;
    }
    return h;
}
 
//== GESTION DIV_HANDICAP ==============================================================
function handi_onover(){
	var	lHandi = document.getElementById("handicap");
	lHandi.style.height = "auto";
}
function handi_onout(){
	var	lHandi = document.getElementById("handicap");
	lHandi.style.height = "27px";
}
//== GESTION FONTSIZE ==================================================================
function incr_font_size() {
	if (currentFontSize == undefined){
		currentFontSize = defaultFontSize;
	}
	if (currentFontSize < 20) {
		currentFontSize++;
		document.body.style.fontSize = currentFontSize + "px";
	}
}
function restore_font_size() {
	currentFontSize = defaultFontSize;
	document.body.style.fontSize = defaultFontSize + "px";
}
function decr_font_size() {
	if (currentFontSize == undefined){
		currentFontSize = defaultFontSize;
	}
	if (currentFontSize > 8) {
		currentFontSize--;
		document.body.style.fontSize = currentFontSize + "px";
	}
}
 
//== GESTION CONTRASTE =================================================================
function displayNB(){
	setActiveStyleSheet("accessibilite");
	toggleNB = "NB";
}
function displayBN(){
	setActiveStyleSheet("accessibilite_inv");
	toggleNB = "BN";
}
function displayNormal(){
	setActiveStyleSheet("normal");
	toggleNB = "normal";
}
function setActiveStyleSheet(title) {
	var i, a, main;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if((a.getAttribute("rel").indexOf("style") != -1) && (a.getAttribute("title"))) {
			a.disabled = true;
			if(a.getAttribute("title") == title) a.disabled = false;
		}
	}
}
 
//== GESTION COOKIE ====================================================================
function createCookie(name, value, days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		var expires = "; expires=" + date.toGMTString();
	} else
		expires = "";
	document.cookie = name + "=" + value + expires + "; path=/";
};
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for ( var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ')
			c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) == 0)
			return c.substring(nameEQ.length, c.length);
	}
	return null;
};
 
function setUserOptions() {
	var cookie_FZ, cookie_NB;
	if (!prefsLoaded) {
 
		cookie_FZ = readCookie("fontSize");
		currentFontSize = cookie_FZ ? cookie_FZ : defaultFontSize;
		document.body.style.fontSize = currentFontSize + "px";
 
		cookie_NB = readCookie("NB");
		toggleNB = cookie_NB ? cookie_NB : "normal";
		if(toggleNB == "NB"){displayNB();}
		if(toggleNB == "BN"){displayBN();}
		prefsLoaded = true;
	}
 
}
 
function saveSettings() {
	createCookie("fontSize", currentFontSize, 365);
	createCookie("NB", toggleNB, 365);
}
Les définitions des CSSheets :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
<link href="templates/<?php echo $this->template ?>/css/div_handicap.css" rel="stylesheet" type="text/css" />
<link title="normal" href="templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" />
<link title="accessibilite" href="templates/<?php echo $this->template ?>/css/accessibilite.css" rel="alternate stylesheet" type="text/css" />
<link title="accessibilite_inv" href="templates/<?php echo $this->template ?>/css/accessibilite_inv.css" rel="alternate stylesheet" type="text/css" />
Les appels initiaux et finaux dans "body":
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
<body onload="init();" onunload="finish();">
Ce module fonctionne parfaitement sous FF & IE>=7. En revanche sous IE6 (via IETester), le switcheur de css ne marche pas. A savoir que la gestion de taille de police marche bien.

Je debugue depuis 2 heures, et là j'ai besoin d'un œil extérieur, donc .... à l'aide !!

Merci d'avance.