Problème de péplacement de calque dans une application de carte

Avant toute chose bonjour et merci d'avance d'avoir ou de prendre le temps de lire le contenu de mon problème... je travaille actuellement sur une application de cartographie [ non, je ne veux pas utiliser google-map ] et pour des raisons ergonomique je voudrais pouvoir replacer mon fond de carte en fonction des coordonnées d'une référence de lieu précise. N'étant pas développeur mais plutôt designer, je me confronte aux limites de ma propre compréhension du langage. Je suis parti à la recherche d'une portion de script me permettant d'animer cette fameuse fonctionnalité ( voir le code ci-dessous) mais le code fait en sorte que le mouvement de la div que je veux faire bougé, démare toujours d'un point zéro en x et y . Je veeux dire que le left et top du css en remis à 0px par défault. Si quelqu'un pouvez m'aiguiller sur un piste ou une solution pour venir à bout de mon problème... Merci d'avance. test 1
test 2

This text is animated

Le code ne passe pas ?! Y aurait-il une balise spécifique pour le rendre lisible ? Avant toute chose bonjour et merci d'avance d'avoir ou de prendre le temps de lire le contenu de mon problème... je travaille actuellement sur une application de cartographie [ non, je ne veux pas utiliser google-map ] et pour des raisons ergonomique je voudrais pouvoir replacer mon fond de carte en fonction des coordonnées d'une référence de lieu précise. N'étant pas développeur mais plutôt designer, je me confronte aux limites de ma propre compréhension du langage. Je suis parti à la recherche d'une portion de script me permettant d'animer cette fameuse fonctionnalité ( voir le code ci-dessous) mais le code fait en sorte que le mouvement de la div que je veux faire bougé, démare toujours d'un point zéro en x et y . Je veeux dire que le left et top du css en remis à 0px par défault. Si quelqu'un pouvez m'aiguiller sur un piste ou une solution pour venir à bout de mon problème... Merci d'avance. test 1
test 2

Message envolé !
Bonjour,
- Pas bien compris le soucis...
- Ne mets pas réponse acceptée si ce n'est pas le cas...
- Pour ton code fait un copier/coller vers notepad.exe, par exemple, puis une autre copier/coller dans la boîte de saisie, cela devrait le faire normalement ou alors utilise la TextBox classique...

C'est en dessous.
Si vous n'arrivez pas à saisir votre message, CLIQUEZ ICI pour revenir à une "TextBox classique"
;O)

Je test donc le copié / collé de mon code que tu me le conseil :

<script type="text/javascript">
    //<![CDATA[

function Transition(curve, milliseconds, callback) {
    this.curve_ = curve;
    this.milliseconds_ = milliseconds;
    this.callback_ = callback;
    this.start_ = new Date().getTime();
    var me = this;
    this.runCallback_ = function() {
me.run();
    };
}

Transition.prototype.run = function() {
    if (!this.hasNext()) return;
    this.callback_(this.next());
    setTimeout(this.runCallback_, 10);
}

Transition.prototype.hasNext = function() {
    if (this.done_) return this.oneLeft_;
    var now = new Date().getTime();
    if ((now - this.start_) > this.milliseconds_) {
this.done_ = true;
this.oneLeft_ = true;
    }
    return true;
}

Transition.prototype.next = function() {
    this.oneLeft_ = false;
    var now = new Date().getTime();
    var percentage = Math.min(1, (now - this.start_) / this.milliseconds_);
    return this.curve_(percentage);
}


function SineCurve(percentage) {
    return (1 - Math.cos(percentage * Math.PI)) / 2;
}


function onLoad(newx,newy) {
    var element = document.getElementById("animated");
    element.style.position = "absolute";
    //element.style.left = "0px";
    //element.style.top = "0px";
    //element.style.left = newPosx;
    //element.style.top = newPosy;
    element.style.left = element.style.left;
    element.style.top = element.style.top;

    var transition = new Transition(SineCurve, 3000, function(percentage) {
//        var x = (element.parentNode.offsetWidth - element.offsetWidth) /2;
// var y = (element.parentNode.offsetHeight - element.offsetHeight)/2;
        var x = element.offsetWidth + newx;
var y = element.offsetHeight + newy;
element.style.left = Math.round(percentage * x) + "px";
element.style.top = Math.round(percentage * y) + "px";
var newPosx = element.style.left;
var newPosy = element.style.top;
    });
    transition.run();

}

    //]]>
    </script>
    <style type="text/css">

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #canvas {
      height: 100%;
    }

    #animated {
      position: absolute;
      /*left: 0;*/
      /*top: 0;*/
    }

    </style>
  </head>
  <!--<body onload="onLoad(200,500)">-->
<body>
<a href="javascript:void(0);" onclick="onLoad(200,-500)"> test 1</a><br />

<a href="javascript:void(0);" onclick="onLoad(400,100)"> test 2</a><br />

    <div id="canvas"><div id="animated">This text is animated</div></div>
  </body>

Merci le code de mon problème est en ligne