Comment faire un bouton avec un passage lumineux toutes les 5 secondes

**infovect** · 10/07/2014, 15h39

Bonjour
j'aimerai faire un bouton avec un passage lumineux toute les 5 secondes un peu comme le bouton " commandez en ligne" de dominos pizza :http://pizza.dominos.fr/
Comment fait on ça ? svp
PS : je suis un vrai débutant en javascript.

Merci

**SpaceFrog** · 10/07/2014, 15h50

une image de fond ... http://pizza.dominos.fr/images/commandez_btnn.png

et ils font passer au dessus une image avec le "flare" blanc par dessus

ça peut être fait aussi avec un gif animé ...

**infovect** · 10/07/2014, 15h58

Donc pas besoin de Javascript ?

**SpaceFrog** · 10/07/2014, 16h04

heu si ...
pour faire "passer" l'image au dessus ...
en jouant sur la position du "flare"

à part si tu utilise un gif animé

**infovect** · 10/07/2014, 16h08

D'accord mais c'est quoi le script en javascript pour faire passer un flare sur une image ?

désoler je t'en demande beaucoup mais je ne mis connais vraiment pas.

**SpaceFrog** · 10/07/2014, 16h35

avec une image trouvée sur le net ...
http://jsfiddle.net/7aRsC/1

**infovect** · 10/07/2014, 17h17

Merci ça m'aide déjà beaucoup

Mais mon élément a déjà une background-image comment dois-je faire pour contourner ça?

**SpaceFrog** · 10/07/2014, 17h23

en mettre un deuxième ...

**infovect** · 11/07/2014, 14h14

nikel merci beaucoup c'est parfaitement ce qu'il me fallait.
Il me manque un dernier détail

Code :

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

1
2
3
4
5
 
$(function(){
    setInterval( function(){
        $("#flare").css('background-position',"-1000px").animate({'background-position':"+=1000px"},3000)}, 5000);
})

je supose que $("#flare").css est le chemin pour aller animer #flare
mon fichier css qui ce nome fichier.css est dans un dossier qui ce nome css
pour etre plus clair : .../css/fichier.css

donc comme ça marche toujours pas je suppose qu'il faut changer un détail au chemin ?

**SpaceFrog** · 11/07/2014, 14h22

c'est du jquery ...

.css() permat de modifier les propriété css de l'element ciblé par le selecteur $("#flare"), flare étant l'id du bouton

**infovect** · 11/07/2014, 16h30

Mais alors que dois je modifier pour que ça marche ?

désolé je ne m'y connais vraiment pas

**SpaceFrog** · 11/07/2014, 16h52

utiliser jquery ...
http://pckult.developpez.com/tutorie.../introduction/

**kaari kosaku** · 11/07/2014, 22h19

Froggy (si tu me permets :O),

Je suis en totale admiration devant ta patience et ton dévouement

**infovect** · 17/07/2014, 12h15

oui Merci beaucoup pour ton aide et ta patience

Mais bon ya toujours un souci qui doit venir d'autre part tan pis merci quand même !

**SpaceFrog** · 17/07/2014, 13h23

Un comportement particulier ? une message d'erreur en console ? ...
Bref une piste de débogage ?

**infovect** · 17/07/2014, 14h07

Je suis tout simplement perdu pour ce script

voila mon code réuni dans une page HTML :

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
   $(function(){
    setInterval( function(){
        $("#test").css("background-position","-1000px").animate({"background-position":"+=1000px"},3000)}, 5000);
     })
</script>
 
 
</head>
<style type="text/css">
#test{
	width: 300;
	height: 200;
	background-color: #CCCCCC;
	background-image: url("http://www.shred-x.com.au/wp-content/uploads/2013/10/transparent-diagonal-gradient.png");
	top: 400px;
	right: 400px;
}
</style>
<body>
 
<div id="test"> test </div>
 
</body>
</html>

**Bovino** · 17/07/2014, 14h30

Code css :

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

1
2
3
#test{
	width: 300;
	height: 200;

C'est 300 pommes de terre et 200 kilos de légèreté ?

http://jsfiddle.net/bjyv2/

**infovect** · 17/07/2014, 14h44

oui je l'avais déjà corrigé (petit détail) mais le problème n'est pas la. Merci quand même.

Et ça marche très bien dans JSfiddle mais pas sur une page html