Comment transformer une image gif ou jpeg en js ?

[craie]

Bonjour et bon week end à tous
j'ai trouvé sur ce forum, le code pour faire une petite pluie d'image qui suit la souris.
La pluie est constituée de petit +++ multicolores. je voudrai que ces petits ++ soient tous verts. j'ai l'image chez moi mais en jpeg,d'où ma question :Comment transformer une image gif ou jpeg en format js ?
Merci d'avance.

[craie]

up

[Threax]

Bonjour,

Un fichier .js n'est pas un fichier image, c'est un script normalement. Vous devez modifier le code .js que vous avez actuellement en remplaçant dedans l'URL de l'image par l'URL de votre image.

[craie]

Merci toto, j'ai pourtant essayé, mais ça ne fonctionne pas
voici le code original :
<SCRIPT src=http://pmsc.free.fr/J/09118195605.js type=text/javascript></SCRIPT>

et l'adresse de mon image
https://i.servimg.com/u/f87/11/07/55/00/10.jpg.
j'avais alors pensé que c'était une histoire de format...
peut on m'aider ?

[Invité]

Code:

// Script par PatMax - www.patmax.info

var sparkles=40;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function()
{
    if (document.getElementById)
    {
        var i, rats, rlef, rdow;
        for (var i=0; i<sparkles; i++)
        {
            var rats=createDiv(3, 3);
            rats.style.visibility="hidden";
            document.body.appendChild(tiny[i]=rats);
            starv[i]=0;
            tinyv[i]=0;
            var rats=createDiv(5, 5);
            rats.style.backgroundColor="transparent";
            rats.style.visibility="hidden";
            var rlef=createDiv(1, 5);
            var rdow=createDiv(5, 1);
            rats.appendChild(rlef);
            rats.appendChild(rdow);
            rlef.style.top="2px";
            rlef.style.left="0px";
            rdow.style.top="0px";
            rdow.style.left="2px";
            document.body.appendChild(star[i]=rats);
        }
        set_width();
        sparkle();
    }
}

function sparkle()
{
    var c;
    if (x!=ox || y!=oy)
    {
        ox=x;
        oy=y;
        for (c=0; c<sparkles; c++) if (!starv[c])
        {
            star[c].style.left=(starx[c]=x)+"px";
            star[c].style.top=(stary[c]=y)+"px";
            star[c].style.clip="rect(0px, 5px, 5px, 0px)";
            star[c].style.visibility="visible";
            starv[c]=50;
            break;
        }
    }
    for (c=0; c<sparkles; c++)
    {
        if (starv[c]) update_star(c);
        if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
}

function update_star(i)
{
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i])
    {
        stary[i]+=1+Math.random()*3;
        if (stary[i]<shigh+sdown)
        {
            star[i].style.top=stary[i]+"px";
            starx[i]+=(i%5-2)/5;
            star[i].style.left=starx[i]+"px";
        }
        else
        {
            star[i].style.visibility="hidden";
            starv[i]=0;
            return;
        }
    }
    else
    {
        tinyv[i]=50;
        tiny[i].style.top=(tinyy[i]=stary[i])+"px";
        tiny[i].style.left=(tinyx[i]=starx[i])+"px";
        tiny[i].style.width="2px";
        tiny[i].style.height="2px";
        star[i].style.visibility="hidden";
        tiny[i].style.visibility="visible"
    }
}

function update_tiny(i)
{
    if (--tinyv[i]==25)
    {
        tiny[i].style.width="1px";
        tiny[i].style.height="1px";
    }
    if (tinyv[i])
    {
        tinyy[i]+=1+Math.random()*3;
        if (tinyy[i]<shigh+sdown)
        {
            tiny[i].style.top=tinyy[i]+"px";
            tinyx[i]+=(i%5-2)/5;
            tiny[i].style.left=tinyx[i]+"px";
        }
        else
        {
            tiny[i].style.visibility="hidden";
            tinyv[i]=0;
            return;
        }
    }
    else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e)
{
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
}

function set_scroll()
{
    if (typeof(self.pageYOffset)=="number")
    {
        sdown=self.pageYOffset;
        sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft)
    {
        sdown=document.body.scrollTop;
        sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
    {
        sleft=document.documentElement.scrollLeft;
        sdown=document.documentElement.scrollTop;
    }
    else
    {
        sdown=0;
        sleft=0;
    }
}

window.onresize=set_width;
function set_width()
{
    if (typeof(self.innerWidth)=="number")
    {
        swide=self.innerWidth;
        shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth)
    {
        swide=document.documentElement.clientWidth;
        shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth)
    {
        swide=document.body.clientWidth;
        shigh=document.body.clientHeight;
    }
}

function createDiv(height, width)
{
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Insérez dans LA ligne ci-dessous soit "multicolore" soit le code de la couleur unique que vous souhaitez avec le #  //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  couleur = "multicolore";
  if (couleur == 'multicolore')
  {
     Rouge = Math.floor(Math.random()*256) ;
      Vert = Math.floor(Math.random()*256) ;
      Bleu = Math.floor(Math.random()*256) ;
      div.style.backgroundColor="rgb("+Rouge+","+Vert+","+Bleu+")";
  }
  else
  {
     div.style.backgroundColor=couleur ;
  }
  return (div);
}


Pas d'images dans ce script.

Modifies juste la couleur dans cette section :

Code:

  {
     Rouge = Math.floor(Math.random()*256) ;
      Vert = Math.floor(Math.random()*256) ;
      Bleu = Math.floor(Math.random()*256) ;
      div.style.backgroundColor="rgb("+Rouge+","+Vert+","+Bleu+")";
  }

Par contre, je ne connais pas le JS. Demande l'aide d'un scripteur pour ça.

Après, héberges-le sur un serveur FTP et modifie le code HTML qui appelle le script

[R4PHAEL]

Code:

<SCRIPT src="http://ns10.freeheberg.com/~r4phael/filante.js" type="text/javascript"></SCRIPT>

Essai avec lui, tel quel, il fonctionne, maintenant voir si la couleur te conviens

[craie]

C'est parfait merci
c'est résolu, merci à vous deux