Mon script est "mal formé" & recherche de script

**Msieurduss** · 07/09/2010, 13h33

Bonjour à tous

N'étant pas un fana de Flash et y préférant le Js, je cherche un script qui permettrait l'équivalent de l'effet que l'on voie ici quand on passe la souris sur les 3 images : http://aslearningdesign.fr/

J'ai tenté de faire le script suivant, à la mano :

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
 
<html>
<head>
 
<script type="text/javascript">
 
var timeout = 100;
var max = 7;
var i=0;
 
function FadeAndBorder () {
 
	var bordure = document.getElementById('test').style.border;
	var opacite = document.getElementById('test').style.opacity;
 
	opacite='0.'+i;
	bordure=bordure+i;
 
	if (i < max) {
		setTimeout('FadeAndBorder()',timeout);
    } else {
        i=0;
    }
 
	i++;
 
}
 
</script>
 
</head>
<body>
 
<div id="general">
 
	<div id="test" style="width: 200px; height: 200px; background-color: #ddd; border: 1px solid #fff; position: absolute; opacity: 0.1;" onmouseover="FadeAndBorder();">
	</div>
 
	<img src="soldat.jpg" style="width:200px; height: 200px;" />
 
</div>
 
</body>
</html>

La console d'erreur de Firefox me renvoie "Mal formé" (!) à l'endroit " if (i < max) { ".
Je ne comprends vraiment pas d'où vient le problème... Et du coup le script ne fonctionne pas du tout...

Trois questions :

1. Quelqu'un voit-il d'où vient l'erreur ?
2. Problème avec la bordure : elle va partir vers l'extérieur et non vers l'intérieur... Y a-t-il donc un moyen plus convenable de retrouver l'effet du le site sus-cité ?
3. Existe-t-il un script, sans doute plus propre et surtout plus puissant, permettant de faire ce genre d'effet ? J'ai regardé du côté de JQuery & Scriptaculous, mais je n'ai pas vu ça...

Merci par avance !

**tusssss** · 07/09/2010, 15h20

2. Problème avec la bordure : elle va partir vers l'extérieur et non vers l'intérieur... Y a-t-il donc un moyen plus convenable de retrouver l'effet du le site sus-cité ?

Regardez la propriété padding.

**Bovino** · 07/09/2010, 15h36

Code :

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

1
2
var bordure = document.getElementById('test').style.border;
var opacite = document.getElementById('test').style.opacity;

Là, tu ne références pas la propriété de style, tu stockes une valeur dans une variable. Donc quand tu modifies la variable, ça n'a pas d'impact sur le style correspondant.
Il faut donc référencer le style, pas sa valeur :

Code :

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

var bordure = document.getElementById('test').style;

puis :

Code :

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

1
2
bordure.border = ...;
bordure.opacity = ...;

**Msieurduss** · 07/09/2010, 19h58

Merci beaucoup. En effet j'ai écrit n'importe quoi là -_-

Mon script est "mal formé" & recherche de script

JavaScript

Discussions similaires

Partager

Partager