recherche et aide d'un code js

Version imprimable

25/03/2011, 22h48
papaye0

recherche et aide d'un code js
Bonjour a tous, je cherche un script tres simple en Js. Je ne connais vraiment rien en Js et je viens tout juste de me rendre compte que sa me serait utile.
Donc pourriez vous m'indiquer le chemin que je l'arpente correctement ?

Voila un bout de code html, je voudrais qu'au passage de la souris sur l'un des liens a l'id bt_* la valeur "left" de la div#tata change.
Code:

1 2 3 4 5 6 7 <div class="toto"> <a href="#" id="bt_1"></a> <a href="#" id="bt_2"></a> </div> <div id="tata" style="position:absolute;left:0px;"> </div>
en tout cas merci pour l'attention que vous porterez a ma demande :ccool:
A bientôt.

Edit: voila 2h que j'étudie le JS et j'ai pondu ça, mais je ne comprends pas pourquoi il ne fonctionne pas.
Code:

1 2 3 4 5 6 7 var pos1 = 0 , tata = document.getElementById('tata') , bt_1 = document.getElementById('bt_1'); if (bt_1.mouseover) { while (true) { pos1 += 5; teste.style.left = pos1; } }

Citation:

Envoyé par papaye0

Bonjour a tous, je cherche un script tres simple en Js. Je ne connais vraiment rien en Js ...

Edit: voila 2h que j'étudie le JS et j'ai pondu ça, mais je ne comprends pas pourquoi il ne fonctionne pas.

Comment peux-tu savoir que c'est simple si tu n'y connaît rien ?

2h pour apprendre un langage, c'est un peu juste :mouarf:

Je peux pas t'expliquer pourquoi ton code ne fonctionne pas, sauf à dire qu'il n'y avait aucune chance pour qu'il fonctionne. Tu as trouvé cet exemple où ? cela ne correspond à rien...

Un code qui fonctionne un peu mieux :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function add_even(id_classe,classe,id_cible) 
{
	var tab = new Array();
 
	var source = document.getElementById(id_classe);
 
	tab = source.getElementsByTagName('*');
 
	var tab_length = tab.length;
 
	for (var i=0; i < tab_length; i++) 
		{
                if (tab[i].className == classe)
                { 	
					tab[i].onmouseover = function() {document.getElementById(id_cible).style.marginLeft='20px'};
					tab[i].onmouseout = function() {document.getElementById(id_cible).style.marginLeft='0px'};
 
                }
		}
 
}
 
function addLoad(func) 
{
	if (window.addEventListener)
		{
			window.addEventListener("load", func, false);
		}
	else if (document.addEventListener)
		{
			document.addEventListener("load", func, false);
		}
	else if (window.attachEvent)
		{
			window.attachEvent("onload", func);
		}
}
 
addLoad(function() {add_even('toto','mod_align','tata')});
 
-->
</script>
<style type="text/css">
.mod_align {
margin-top:2em;
border:1px solid green;
 
}
</style>
</head>
 
<body>
<div id="toto">
<div class = "mod_align">TEXTE 0</div>
 
<div class = "mod_align">TEXTE 1</div>
 
<p style="margin-top:2em;border:1px solid red;"><a class = "mod_align">TEXTE 2</a></p>
 
<p class = "mod_align">TEXTE 3</p>
 
<div class = "mod_align">TEXTE 4</div>
 
</div>
<div id="tata">tata</div>
 
</body>
</html>

Pour te documenter sur les fonctions employées tu tapes javascript suivi du nom de la fonction dans google et ça devrait te renseigner ex :
javascript getElementsByTagName

Bon... l'inconvénient du code "minimaliste" au dessus c'est que l'on ne peut pas ajouter une autre définition de classe en plus de "mod_align" pour les éléments ciblés.

On peut résoudre ce problème en faisant :

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function add_even(id_classe,classe,id_cible) 
{
 
 
    function in_array (needle, haystack) 
    {
        var key = '';
 
        for (key in haystack) 
        {
                if (haystack[key] == needle) 
                {                
                    return true;
                }
        }    
        return false;
    }
 
 
    var tab = new Array();
 
    var source = document.getElementById(id_classe);
 
    tab = source.getElementsByTagName('*');
 
    var tab_length = tab.length;
 
    var tab_classe = new Array();
 
    for (var i=0; i < tab_length; i++) 
        {
                tab_classe = tab[i].className.split(' ');
 
                if (in_array (classe, tab_classe) )
                {     
                    tab[i].onmouseover = function() {document.getElementById(id_cible).style.marginLeft='20px'};
                    tab[i].onmouseout = function() {document.getElementById(id_cible).style.marginLeft='0px'};
                }
        }
 
}
 
function addLoad(func) 
{
    if (window.addEventListener)
        {
            window.addEventListener("load", func, false);
        }
    else if (document.addEventListener)
        {
            document.addEventListener("load", func, false);
        }
    else if (window.attachEvent)
        {
            window.attachEvent("onload", func);
        }
}
 
addLoad(function() {add_even('toto','mod_align','tata')});
 
-->
</script>
<style type="text/css">
.mod_align {
margin-top:2em;
border:1px solid green;
}
.color_back {
background:#E6E6E6;
}
 
</style>
</head>
 
<body>
<div id="toto">
<div class = "mod_align  color_back">TEXTE 0</div>
 
<div class = "mod_align">TEXTE 1</div>
 
<p style="margin-top:2em;border:1px solid red;"><a class = "mod_align">TEXTE 2</a></p>
 
<p class = "mod_align">TEXTE 3</p>
 
<div class = "mod_align">TEXTE 4</div>
 
</div>
<div id="tata">tata</div>
 
</body>
</html>

26/03/2011, 20h32
javatwister

Citation:

je voudrais qu'au passage de la souris sur l'un des liens a l'id bt_* la valeur "left" de la div#tata change

moi j'aime bien cette partie de l'exposé :ccool:

c'est clair, réaliste, précis... on voit tout de suite ce que tu veux;
26/03/2011, 20h59
ABCIWEB

Citation:

Envoyé par javatwister

moi j'aime bien cette partie de l'exposé :ccool:

c'est clair, réaliste, précis... on voit tout de suite ce que tu veux;

:lol:

C'est aussi pour ça que je n'ai pas répondu directement à la question en utilisant une méthode par classe et non par id. C'est plus générique et fait apprendre plus de choses...