IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Lancement script pour pivoter des images


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2006
    Messages : 1
    Points : 1
    Points
    1
    Par défaut 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 : 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
     <!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 : 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
     --------------------------------------------------------------------
    // 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.

  2. #2
    Expert éminent

    Avatar de denisC
    Profil pro
    Développeur Java
    Inscrit en
    Février 2005
    Messages
    4 050
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Service public

    Informations forums :
    Inscription : Février 2005
    Messages : 4 050
    Points : 7 641
    Points
    7 641
    Par défaut
    Citation Envoyé par steph_raynaud
    Un panneau d'erreur n'indique que "this.img.width is Null", pourquoi ?
    Sur quel navigateur? Sinon, essaye de mettre tous tes attributs entre " (c'est dans la norme XML).

Discussions similaires

  1. Réponses: 0
    Dernier message: 31/12/2009, 04h32
  2. [Recherche] Recherche un logiciel pour assembler des images
    Par Furius dans le forum Autres Logiciels
    Réponses: 6
    Dernier message: 29/12/2005, 19h03
  3. utiliser un script pour inserer des objets 3D
    Par s_mihai dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 09/08/2005, 14h52
  4. script pour ajouter des utilisateurs postgres
    Par xopos dans le forum PostgreSQL
    Réponses: 6
    Dernier message: 16/08/2004, 11h49
  5. Script pour envoyer des info a mysql
    Par rhum1 dans le forum Linux
    Réponses: 6
    Dernier message: 15/04/2003, 17h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo