Effets d'images

Un lien url dans une image balladeuse

Cela peu s'avérer drôle ! Tentez le coup !

Copiez le code ci dessous. Dans ce cas précis, l'image amène sur Chez-Swan.Net en cliquant dessus.
Vous collez ensuite ce code dans l'article de la page où vous voulez voir apparaître cette image-lien.

Code HTML :

 
 
<body onload="chargement(null)"><a href='#' onclick='redirigerObjet(); return false;' id='objetLien'><img src=' http://idata.over-blog.com/0/37/17/67/articles/oeuf1.jpg id='objetImage' style='position: absolute; z-index: 10;'/></a> '
 
  <script type='text/javascript'>
 
   var x1 = xObjet();
   var y1 = yObjet();
 
   var x2;
   var y2;
 
   createXObjet();
   createYObjet();
 
   var direction = (y2 - y1) / (x2 - x1);
   var ordonnee = y1 - direction * x1;
 
   var xc = x1;
   var yc = y1;
 
   var vitesse = 4.5;
 
   function xObjet() {
    return Math.floor(Math.random() * (screen.width - 250));
   }
 
   function yObjet() {
    return Math.floor(Math.random() * (screen.height - 250));
   }
 
   function createXObjet() {
 
    do {
     x2 = xObjet();
    } while(Math.abs(x2 - x1) < 50);
 
   }
 
   function createYObjet() {
 
    do {
     y2 = yObjet();
    } while(Math.abs(y2 - y1) < 50);
 
   }
 
   function redirigerObjet() {
 
    var objet = document.getElementById('objetLien');
 
    if(objet.display != 'none') {
     objet.display = 'none';
     document.location.href = 'http://easy-design.net/';    }
 
   }
 
   function deplacerObjet() {
 
    if(xc == x2 && yc == y2) {
 
     x1 = x2;
     y1 = y2;
 
     createXObjet();
     createYObjet();
 
     direction = (y2 - y1) / (x2 - x1);
     ordonnee = y1 - direction * x1;
 
     xc = x1;
     yc = y1;
 
    }
 
    if(x2 > x1) {
 
     xc += vitesse;
 
     if(xc > x2) {
      xc = x2;
     }
 
    } else {
 
     xc -= vitesse;
 
     if(xc < x2) {
      xc = x2;
     }
 
    }
 
    yc = Math.round(ordonnee + direction * xc);
 
    var objet = document.getElementById('objetImage');
 
    objet.style.left = xc + 'px';
    objet.style.top = yc + 'px';
 
   }
 
   setInterval('deplacerObjet()', 10);
 
  </script>

Pour contrôler la vitesse du Gif

Il suffit de modifier "var vitesse = 4.5;" dans le script. Plus vous montez les chiffres et plus vite il ira ! plus vous baissez la valeur et plus lent cela sera ! Actuellement la vitesse sur mon gif est réglée à 2.5

Changer l'url dans le script :

Trouver :

Code HTML :

    function redirigerObjet() {
 
    var objet = document.getElementById('objetLien');
 
    if(objet.display != 'none') {
     objet.display = 'none';
     document.location.href = 'http://easy-design.net/';    }
 
   }

Et mettez le lien de votre choix.

Astuce:

Remplacez l'image par un lien texte est aussi possible