Lancement script pour pivoter des images

Salut à tout le monde,

Mon problème est le suivant, je souhaite faire une animation avec le menu de mon site (en local pour l'instant), Je souhaiterais que les images avec une animation puis, que les images tournent autour d'un point (les 2 étapes précédentes sont Ok), simplement, je souhaiterais que les images pivote sur elle même, j'ai trouvé le script pour ce type de mouvement, simplement, je ne sais plus comment faire pour pouvoir lancer ce script. Un panneau d'erreur n'indique que "this.img.width is Null", pourquoi ?

Par la suite, je vous fournis les lignes de codes pour les 2 actions validées, par contre, en gras, le code que j'ai tapé pour apeller le fichier "wz_rotateimg.js".

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
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
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Résumé de la partie théorique d</TITLE>
<META http-equiv=Content-Language content=fr-ca>
<META content="Microsoft FrontPage 5.0" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css> BODY {
SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; scrollbar-dark-shadow-color: #000000}
</STYLE>
</HEAD>
<BODY bgProperties=fixed onload=startthedots();>
<script type="text/javascript" src="wz_rotateimg.js">window.onerror = new Function('return true;');</script>
<SCRIPT language=JavaScript>
// Animiation et rotation autour d'un point
window.onerror=null;
netscape = (document.layers) ? 1:0;
goodIE = (document.all) ? 1:0;
//document.onmousemove=MoveHandler;
var gotthere = 0; var count = 0;
// Pour info : il ne faut pas mettre ces varibles a la suite sur une seule ligne
var ietopcorner=''
var ieleftcorner=''
//toplocation = new Array( 0,30,57,80,101,125,80,80,101,125,80,0 );
temptoplocation = new Array( 50,100,100,150,150,200,200,100,150,150,200,200,0 );
//leftlocation = new Array( 0,292,318,181,181,217,263,318,181,181,217,263,-96 );
templeftlocation = new Array( 0,0,260,390,420,550,680,390,420,550,680,0 );
difftop = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 ); diffleft = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
questtop = -13; questleft2 = -96;
if (netscape) {
document.body=new Object()
document.body.scrollTop=''
document.body.scrollLeft=''
//window.captureEvents(Event.MOUSEMOVE); window.onMouseMove = MoveHandler; 
var layerstart = "document."; var layerleft = ".left"; var layertop = ".top"; var layerstyle = "";
var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; }
else if (goodIE) {
ietopcorner=document.body.scrollTop
ieleftcorner=document.body.scrollLeft
layerstart = "document.all."; layerleft = ".left"; layertop = ".top"; layerstyle = ".style";
windowWidth=600; windowHeight=400; }
// end error trapping
var Ypos2 = 72; var Xpos2 = 72;
function startthedots() {
if (goodIE) {
windowWidth=document.body.clientWidth;
windowHeight=document.body.clientHeight; }
Xorigin = 204; Yorigin = 147; 
spin();run(); }
var OrbitSize = 125;
count=1; delay=100; direction = -1;
Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
var speed = -0.06;
var offset = 1;
function spin() {
for ( j = 0 ; j <= 9 ; j++ ) {
Count[j] = Count[j] + (speed*direction); 
Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset)); 
Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j])); }
/* setTimeout('spin()',3); */}
function run() {
var nameImg = "newImg"; count++; 
for ( j = 0 ; j <= 9 ; j++ ) {
difftop[j] = Ypoint[j] - temptoplocation[j]; diffleft[j] = Xpoint[j] - templeftlocation[j];
diff = 30;
temptoplocation[j] = temptoplocation[j] + difftop[j]/diff;
templeftlocation[j] = templeftlocation[j] + diffleft[j]/diff;
eval(layerstart+"a"+j+layerstyle+layerleft+" = document.body.scrollLeft+templeftlocation["+j+"]");
eval(layerstart+"a"+j+layerstyle+layertop+" = document.body.scrollTop+temptoplocation["+j+"]");
// Lancement de la programmation "rotation sur lui-même"
var pent_obj=Count[j]*180/Math.PI;
nameImg_fin = nameImg.j; SET_ROTATABLE(nameImg_fin, 90, "winky", 180); 
if (window.rots) rots[nameImg_fin].rotateTo(pent_obj); }
setTimeout('run()', 25) }
badIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
macintosh = navigator.userAgent.indexOf("Mac");
if (browserName == "Microsof") { 
if (macintosh != -1) { badIE = 1; }
if (browserVer < 4) { badIE = 1; }
}
</SCRIPT>
<STYLE type=text/css>#a0 {
Z-INDEX: 2000; LEFT: -24px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a1 {
Z-INDEX: 2000; LEFT: 96px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a2 {
Z-INDEX: 2000; LEFT: 216px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a3 {
Z-INDEX: 2000; LEFT: 338px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a4 {
Z-INDEX: 2000; LEFT: 460px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a5 {
Z-INDEX: 2000; LEFT: 640px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a6 {
Z-INDEX: 2000; LEFT: -24px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a7 {
Z-INDEX: 2000; LEFT: 200px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a8 {
Z-INDEX: 2000; LEFT: 300px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
#a9 {
Z-INDEX: 2000; LEFT: 600px; WIDTH: 9px; CLIP: rect(0px 9px 9px 0px); POSITION: absolute; TOP: -24px; HEIGHT: 25px
}
</STYLE>
<DIV id=a0 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg0" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a1 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg1" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a2 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg2" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a3 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg3" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a4 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg4" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a5 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg5" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a6 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg6" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a7 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg7" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a8 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg8" src="swirls_fichiers/swirl.gif"></a></DIV>
<DIV id=a9 align=center><a href="../test.html"><IMG width=9 height=9 name="newImg9" src="swirls_fichiers/swirl.gif"></a></DIV>
</BODY>
</HTML>

"wz_rotateimg.js" (ce codage est fournit par le site Web : www.walterzorn.com) :

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
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
 --------------------------------------------------------------------
// PATH TO THE TRANSPARENT 1*1 PX IMAGE (required by NS 4 as spacer)
var spacer = 'swirls_fichiers/transparentpixel.gif';
//window.onerror = new Function('return true;');
function rr_getPageXY(r_o) {
if (rr_n4) {
r_o.x = r_o.img.x || 0; r_o.y = r_o.img.y || 0; }
else {
var r_p = r_o.img; r_o.x = r_o.y = 0;
while (r_p) {
r_o.x += parseInt(r_p.offsetLeft); r_o.y += parseInt(r_p.offsetTop);
r_p = r_p.offsetParent || null; }
}
};
function rr_getDiv(r_x) {
return (
document.all? document.all[r_x]
: rr_n4? document.layers[r_x]
: document.getElementById? document.getElementById(r_x)
: null );
}
function RRObj(r_o, r_ang) {
this.name = r_o;
this.img = document.images[r_o];
rr_getPageXY(this);
this.w = this.img.width; this.h = this.w = this.img.height; this.angle = r_ang; this.htm = '';
for (var r_i = this.h; r_i--;) {
for (var r_j = this.w; r_j--;) {
this.htm += '<div id="' + r_o + 'row' + r_i + 'col' + r_j + '"'+
' style="position:absolute;'+
'left:' + (this.x+r_j) + 'px;'+
'top:' + (this.y+r_i) + 'px;'+
'width:1px;height:1px;'+
(rr_n4? 'clip:rect(0, 1px 1px 0);">' : 'overflow:hidden;">')+
'<div style="position:absolute;'+
'left:' + (-r_j) + 'px;'+
'top:' + (-r_i) + 'px;">'+
'<img src="' + this.img.src+ '" '+
'width="' + this.w + '" height="' + this.h + '">'+
'<\/div><\/div>'; }
}
}
RRObj.prototype.rotateTo = function(r_ang) {
this.angle = r_ang;
var r_sin = Math.sin(r_ang = r_ang*Math.PI/180), r_cos = Math.cos(r_ang),
r_cx = this.w>>1, r_cy = this.h>>1, r_o, r_z = 0;
for (var r_i = this.h; r_i--;) {
for (var r_j = this.w; r_j--;) {
r_o = this.pxs[r_z++] || null;
var r_x = r_j-r_cx, r_y = r_i-r_cy,
r_xrot = Math.round(r_x*r_cos-r_y*r_sin+r_cx), r_yrot = Math.round(r_x*r_sin+r_y*r_cos+r_cy);
if (rr_n4) r_o.moveTo(this.x+r_xrot, this.y+r_yrot);
else if (r_o) {
r_o.style.left = (this.x+r_xrot)+rr_px; r_o.style.top = (this.y+r_yrot)+rr_px; }
}
}
}
RRObj.prototype.swapImage = function(r_x) { /*this.nimg.src = r_x;*/ };
function SET_ROTATABLE() {
var r_a = SET_ROTATABLE.arguments, r_htm = '', r_o; 
window.rr_n4 = !!document.layers;
window.rr_px = (rr_n4 || !!(window.opera && !(r_o = document.documentElement || document.body) && !r_o.innerHTML))? '' : 'px';
window.rots = new Array();
for (var r_i = r_a.length-1; r_i > 0; r_i -= 2) {
r_o = rots[rots.length] = rots[r_a[r_i-1]] = new RRObj(r_a[r_i-1], r_a[r_i]);
r_htm += r_o.htm;
if (rr_n4) r_o.img.src = spacer;
else r_o.img.style.visibility = 'hidden'; }
document.write((rr_n4? '<div style="position:absolute;"><\/div>\n' : '') + r_htm);
for (r_i = rots.length; r_i--;) {
(r_o = rots[r_i]).pxs = new Array(r_o.w*r_o.h);
for (var r_z = 0, r_j = r_o.h; r_j--;) {
for (var r_k = r_o.w; r_k--; r_z++)
r_o.pxs[r_z] = rr_getDiv(r_o.name + 'row' + r_j + 'col' + r_k); }
r_o.rotateTo(r_o.angle); }
}

--------------------------------------------------------------------

Tous les conseils sont les bienvenues. En vous remerciant,
@+, Stef.