un logo en javascript

Version imprimable

25/07/2010, 01h43
hanou88

un logo en javascript

salut
je suis débutante en javascript et je veux crée des pages web............l'essentiel je veux savoire comment je peux faire un logo qui entoure de la curseur
comme dans ce lien
http://loujaine.bloguez.com/loujaine...erbes,p,1.html
(le logo est ***BIENVENUE****CHEZ****LOUJAINE*)
merci d'avance
25/07/2010, 10h56
SpaceFrog

Logo qui entoure le curseur ?
Pas vu...
peut être parce que je suis sous ffx ...
et puis pas trop cherché parce que j'ai pas pu rester plus de 30 secondes sur la page :aie: (Tous les gouts sont dans la nature... Mais y'a des limites quand même; là c'est presque un attentat :mouarf: )
25/07/2010, 10h58
RomainVALERI

Que veux-tu faire exactement ? :koi: je n'ai rien compris.

curseur ? :? logo ? :?

Mais effectivement, indépendamment du problème technique, comme l'évoque SpaceFrog : les choix de présentation du site ont l'air de dater des années 90 : le fond animé, la musique imposée, etc. (c'est assez dur à supporter plus de quelques secondes pour quiconque a un peu l'habitude du web :aie:)

asser etrange comme site surtout la facon qu'il a ete codé

sinon le script se trouve en fin de page

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
 
<SCRIPT><!-- Begin
    if (document.all) {
    //Things you can alter
    yourLogo = " ***BIENVENUE****CHEZ****LOUJAINE***";  //Not less than 2 letters!
    logoFont = "verdana";
    logoColor = "#ffffff";
    //Nothing needs altering below!
    yourLogo = yourLogo.split('');
    L = yourLogo.length; 
    TrigSplit = 360 / L;
    Sz = new Array()
    logoWidth = 105;
    logoHeight = -30;
    ypos = 0;
    xpos = 0;
    step = 0.03;
    currStep = 0;
    document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < L; i++) {
    document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
    +'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
    +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
    }
    document.write('</div></div>');
    function Mouse() {
    ypos = event.y;
    xpos = event.x - 5;
    }
    document.onmousemove=Mouse;
    function animateLogo() {
    outer.style.pixelTop = document.body.scrollTop; 
    for (i = 0; i < L; i++) {
    ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
    ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
    Sz[i] = ie[i].style.pixelTop - ypos;
    if (Sz[i] < 5) Sz[i] = 5;
    ie[i].style.fontSize = Sz[i] / 1.7;
    }
    currStep -= step;
    setTimeout('animateLogo()', 20);
    }
    window.onload = animateLogo;
    }
    //  End -->
    </SCRIPT>

25/07/2010, 16h30
RomainVALERI
Citation:
Envoyé par mekal

Code:

1 2 3 if (document.all) { // ... }
>>> cette ligne signifie (pour simplifier) "Internet Explorer seulement"

D'autre part, ce code date beaucoup, je te déconseille de l'utiliser, hanou88...
25/07/2010, 18h00
hanou88

Citation:

Envoyé par RomainVALERI

Que veux-tu faire exactement ? :koi: je n'ai rien compris.

curseur ? :? logo ? :?

Mais effectivement, indépendamment du problème technique, comme l'évoque SpaceFrog : les choix de présentation du site ont l'air de dater des années 90 : le fond animé, la musique imposée, etc. (c'est assez dur à supporter plus de quelques secondes pour quiconque a un peu l'habitude du web :aie:)

oui le curseur de souris quand tu clique il y a un logo(écriture animé)

Citation:

Envoyé par mekal

asser etrange comme site surtout la facon qu'il a ete codé

sinon le script se trouve en fin de page

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
 
<SCRIPT><!-- Begin
    if (document.all) {
    //Things you can alter
    yourLogo = " ***BIENVENUE****CHEZ****LOUJAINE***";  //Not less than 2 letters!
    logoFont = "verdana";
    logoColor = "#ffffff";
    //Nothing needs altering below!
    yourLogo = yourLogo.split('');
    L = yourLogo.length; 
    TrigSplit = 360 / L;
    Sz = new Array()
    logoWidth = 105;
    logoHeight = -30;
    ypos = 0;
    xpos = 0;
    step = 0.03;
    currStep = 0;
    document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < L; i++) {
    document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
    +'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
    +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
    }
    document.write('</div></div>');
    function Mouse() {
    ypos = event.y;
    xpos = event.x - 5;
    }
    document.onmousemove=Mouse;
    function animateLogo() {
    outer.style.pixelTop = document.body.scrollTop; 
    for (i = 0; i < L; i++) {
    ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
    ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
    Sz[i] = ie[i].style.pixelTop - ypos;
    if (Sz[i] < 5) Sz[i] = 5;
    ie[i].style.fontSize = Sz[i] / 1.7;
    }
    currStep -= step;
    setTimeout('animateLogo()', 20);
    }
    window.onload = animateLogo;
    }
    //  End -->
    </SCRIPT>

j'essay ce code mais il ça marche pas

25/07/2010, 18h15
hanou88

Citation:

Envoyé par RomainVALERI

>>> cette ligne signifie (pour simplifier) "Internet Explorer seulement"

D'autre part, ce code date beaucoup, je te déconseille de l'utiliser, hanou88...

il marche que sur ie

je l'ai mis a jour pour qu'il fonctionne sur tout les navigateurs j'ai entre autre retirer le document.all

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
 
<SCRIPT  language="JavaScript"><!-- Begin
    //Things you can alter
    yourLogo = " ***BIENVENUE****CHEZ****bigoude***";  //Not less than 2 letters!
    logoFont = "verdana";
    logoColor = "red";
    //Nothing needs altering below!
    yourLogo = yourLogo.split('');
    L = yourLogo.length; 
    TrigSplit = 360 / L;
    Sz = new Array()
    logoWidth = 105;
    logoHeight = -30;
    ypos = 0;
    xpos = 0;
    step = 0.03;
    currStep = 0;
    document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < L; i++) {
    document.write('<div id="ie'+i+'" style="position:absolute;top:0px;left:0px;'
    +'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
    +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
    }
    document.write('</div></div>');
 
    function Mouse(s) {
dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement;
xpos =s.clientX - 5;
ypos =s.clientY;
    }
 
 
    if(navigator.appName.substring(0,3)=="Mic"){
document.documentElement.attachEvent('onmousemove',function(){Mouse(event)});
}
else{
document.documentElement.addEventListener("mousemove", Mouse, false);
}
 
    function animateLogo() {
    document.getElementById('outer').style.top = document.body.scrollTop; 
    for (i = 0; i < L; i++) {
    document.getElementById('ie'+i+'').style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
    document.getElementById('ie'+i+'').style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
    Sz[i] = parseInt(document.getElementById('ie'+i+'').style.top) - ypos;
    if (Sz[i] < 5) Sz[i] = 5;
    document.getElementById('ie'+i+'').style.fontSize = Sz[i] / 1.7;
    }
    currStep -= step;
    setTimeout('animateLogo()', 20);
    }
    window.onload = animateLogo;
    //  End -->
    </SCRIPT>