Placer un gif animé devant le bouton "submit"

Bonjour,

J'ai un formulaire d'upload de fichiers et j'aimerais placer le gif animé devant le bouton "Envoyer" mais je ne sais pas comment m'y prendre. Côté css, je suis nul.

Voici le code mon formulaire :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<form action="" method="post" enctype="multipart/form-data" id="form"> <p><input type="file" name="files[]" multiple="multiple" accept="application/pdf"/></p> <p><input type="submit" id="upload" value="Envoyer"/></p> <div id="loading2" style="display:none;"><img src="loading.gif" alt="" /></div>   <script type="text/javascript"> (function (d) { d.getElementById('form').onsubmit = function () { d.getElementById('upload').style.display = 'none'; d.getElementById('loading2').style.display = 'block'; }; }(document)); </script>

---

Merci

Bonjour,

Il ne s'agit pas d'un problème qui touche le JavaScript mais comme vous le précisez du CSS (voir de la structure HTML).

Un div est de type block, deux éléments de type block ne reste pas sur la même ligne par défaut, c'est là que le CSS intervient...

En reprenant votre code :

Code:

---

1 2 3 4

<form action="" method="post" enctype="multipart/form-data" id="form"> <p><input type="file" name="files[]" multiple="multiple" accept="application/pdf"/></p> <p><input type="submit" id="upload" value="Envoyer"/></p> <div id="loading2" style="display:none;"><img src="loading.gif" alt="" /></div>

---

On modifie le style du div comportant l'image que vous désirez placer avant le bouton envoyé :

Code:

---

1 2 3

<p><input type="file" name="files[]" multiple="multiple" accept="application/pdf"/></p> <div id="loading2" style="display:inline; "><img src="loading.gif" alt="" /></div> <input type="submit" id="upload" value="Envoyer" style=""/>

---