Bonjour,

Je voudrais intégrer une animation DHTML / Javascript au sein de mon site valide en XHTML 1.1, animation issue du site dhteumeuleu.

Code xhtml : 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
<html>
<head>
<title>issues - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
    body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
    span {position:absolute;font-family: verdana; font-weight: bold;}
</style>
 
<script type="text/javascript"><!--
// =====================================================================
// script: Gerard Ferrandez - Ge-1-doot - March 2004
// http://www.dhteumeuleu.com
// =====================================================================
 
T    = "What is  real?How do you define real?   Ifyou're talkingabout what youcan feel  whatyou can  smellwhat  you  cantaste and  seethen   real issimply   electrical  signalsinterpreted byyour brain!        ";
I    = 0;
o    = new Array();
xm   = -1000;
ym   = -1000;
///////////////
rad  = 80;
dim  = 200;
///////////////
W    = 0;
H    = 0;
NX   = 14;
NY   = 14;
var nx;
var ny;
 
document.onmousemove = function(e){
    if (window.event) e = window.event;
    xm = (e.x || e.clientX) - (nx  * .5) + dim * .5;
    ym = (e.y || e.clientY) - (ny * .5) + dim * .5;
}
 
function resize() {
    nx = document.body.offsetWidth;
    ny = document.body.offsetHeight;
}
onresize = resize;
 
function CObj(N,i,j,c){
    this.obj = document.createElement("span");
    this.obj.innerHTML = c;
    DOOT.appendChild(this.obj);
    this.N    = N;
    this.To   = 16;
    this.x0   = i*2*W;
    this.y0   = j*2*H;
    this.anim = true;
 
    this.mainloop = function(){
        with (this) {
             dx   = xm - x0;
            dy   = ym - y0;
            dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < rad) {
                anim = true;
                M    = Math.cos(.5 * Math.PI * Math.abs(dist / rad));
                c    = Math.round(84 + M * 171);
                with(obj.style){
                    left     = x0 - dx * M;
                    top      = y0 - dy * M;
                    zIndex   = Math.round(100 + M);
                    fontSize = 8 + M * W * 2;
                    color    = "RGB("+c+","+c+","+c+")";
                }
            } else {
                if(anim){
                    with(obj.style){
                        left     = x0;
                        top      = y0;
                        zIndex   = 0;
                        fontSize = 8;
                        color    = "RGB(88,88,88)";
                    }
                anim = false;
                }
            }
        }
    }
}
function run(){
    for(i in o)o[i].mainloop();
    setTimeout(run,16);
}
 
onload = function (){
    DOOT = document.getElementById("doot");
    with(DOOT.style){
        left = -dim/2;
        top  = -dim/2;
        width = dim;
        height = dim;
    }
    resize();
    W = (dim  / NX) / 2;
    H = (dim / NY) / 2;
    K = 0;
    for(var j=0;j<NY;j++){
        for(var i=0;i<NX;i++){
            c=T.charAt((I++)%T.length).toUpperCase();
            if(c==" ")c="·";
            o[K] = new CObj(K++,i,j,c);
        }
    }
    run();
}
//-->
</script>
</head>
 
<body>
<span style="position:absolute;left:50%;top:50%">
    <span id="doot"></span>
</span>
 
</body>
</html>
Désolé pour la longueur du code...

Après plusieurs tentatives, je pense que le problème vient à cause du DocType que j'utilise qui fais "foirer" l'animation (car dans l'exmple donné seul la balise <html> est déclaré).

Ma question : Est-il possible d'insérer au sein d'une page valide en XHTML 1.1 cette animation ? Si oui, comment ?

Merci à qui me répondra...