recherche et aide d'un code js

papaye0 · 25/03/2011, 22h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
  }
}

ABCIWEB · 26/03/2011, 19h40

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ABCIWEB · 26/03/2011, 20h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

javatwister · 26/03/2011, 20h32

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é

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

ABCIWEB · 26/03/2011, 20h59

Citation:

Envoyé par javatwister

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

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

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...

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email