Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
2044 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis avec script overlay.

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Soucis avec script overlay.

n°2327224
snowden
Posté le 05-01-2019 à 19:50:19  profilanswer
 

Bonjour à tous,
 
Je rencontre un soucis avec un petit script "overlay".
Le soucis est simple a décrire mais dur (pour moi) à résoudre.
 
J'ai plusieurs boutons sur ma page qui ouvrent à chaque fois une fenêtre overlay avec une image gif concernant l'exemple à montrer.
Le soucis est que toutes mes fenêtres overlay montrent la même image au lieu de l'image définie dans ma ligne de code en sachant que c'est toujours la première image de la page qui est prise en compte dans les autres fenêtres.
 
Merci par avance pour votre aide.
 
Voici la partie script :
 
HTML :

Code :
  1. Exemple 1 :
  2. <div id="overlay" onclick="off()"><span class="spank"><center><img src="./img_bash/ex1.gif"></center></span></div>
  3.                      <div><button onclick="on()">Voir un exemple animé</button></div>
  4. Exemple 2 :
  5. <div id="overlay" onclick="off()"><span class="spank"><center><img src="./img_bash/ex2.gif"></center></span></div>
  6.                      <div><button onclick="on()">Voir un exemple animé</button></div>


 
CSS :

Code :
  1. #overlay {
  2.   position: fixed;
  3.   display: none;
  4.   width: 100%;
  5.   height: 100%;
  6.   top: 0;
  7.   left: 0;
  8.   right: 0;
  9.   bottom: 0;
  10.   background-color: rgba(0, 0, 0, 0.8);
  11.   z-index: 2;
  12.   cursor: zoom-out;
  13. }
  14. .spank {
  15.   text-align: center;
  16.   margin: 0;
  17.   margin-top: 160px;
  18.   display: block;
  19.   font-weight: bold;
  20.   color: red;
  21. }
  22. button {
  23.   margin-right: 5%;
  24.   margin-left: 5%;
  25.   padding: 3px;
  26.   background-color: white;
  27.   color: red;
  28.   border: 1px solid red;
  29.   border-radius: 3px;
  30.   cursor: zoom-in;
  31.   font-size: 11px;
  32.  
  33. }
  34. button:hover {
  35.   background-color: #13b524;
  36.   color: white;
  37.   border: 1px solid;
  38.   border-radius: 3px;
  39. }


Message édité par snowden le 05-01-2019 à 20:07:09

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
mood
Publicité
Posté le 05-01-2019 à 19:50:19  profilanswer
 

n°2327225
dede_sav
Posté le 05-01-2019 à 20:14:20  profilanswer
 

Bonjour,
 
Peux-tu rajouter le code Javascript associé aux fonctions on() et off() ?
Mais sinon ton soucis c'est que c'est toujours la même fonction javascript qui est appelé et qui doit afficher l'image.  
Je suppose qu'il faudrait donc mettre un argument dans on(TONARGUMENT) et dans la fonction dire que tel argument vaut tel image.
 
dd


Message édité par dede_sav le 05-01-2019 à 20:15:29
n°2327226
snowden
Posté le 05-01-2019 à 20:15:24  profilanswer
 

Oui pas de soucis, voici le script :
 

Code :
  1. function on() {
  2.     document.getElementById("overlay" ).style.display = "block";
  3. }
  4. function off() {
  5.     document.getElementById("overlay" ).style.display = "none";
  6. }


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327227
dede_sav
Posté le 05-01-2019 à 20:18:20  profilanswer
 

Le deux exemples sont en meme temps dans la page, ou ton soucis est :  
Quelque soit l'image dans la balise img, c'est la même qui s'affiche ?  

n°2327228
snowden
Posté le 05-01-2019 à 20:20:48  profilanswer
 

Oui, les exemples sont sur la même page html et oui quelque soit l'image dans la balise, c'est toujours la première qui s'affiche.
 
Merci d'essayer de me venir en aide ;)


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327230
dede_sav
Posté le 05-01-2019 à 20:36:13  profilanswer
 

Les id doivent être unique par page HTML.
Donc, c'est ici ce qui doit poser problème. Vu qu'il y a deux id="overlay", quand tu lui dis d'en prendre un, il prend toujours le même.
 
Il va falloir les rendre unique (exemple: overlay_1)

n°2327231
dede_sav
Posté le 05-01-2019 à 20:38:08  profilanswer
 

JS:

Code :
  1. fonction on(num) {
  2.     document.getElementById("overlay_"+num ).style.display = "block";
  3. }


 
 
HTML:

Code :
  1. <div id="overlay_1" onclick="off('1')"><span class="spank"><center><img src="./img_bash/ex2.gif"></center></span></div>
  2.                      <div><button onclick="on('1')">Voir un exemple animé</button></div>


Message édité par dede_sav le 05-01-2019 à 20:38:23
n°2327233
snowden
Posté le 05-01-2019 à 20:44:28  profilanswer
 

Ah ok. Et est-il possible de les rendre unique par un nom plutôt qu'un numéro ce qui sera plus simple pour moi que je ne m'embrouille pas parce que je vais en avoir une bonne centaine à faire :(
 
Merci de ton aide.


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327235
dede_sav
Posté le 05-01-2019 à 20:55:45  profilanswer
 

J'ai mis 1 mais tu peux mettre ce que tu veux a la place.

n°2327236
snowden
Posté le 05-01-2019 à 21:03:43  profilanswer
 

Et le chiffre (ou mot), je dois le mettre uniquement sur le "overlay_xxxx".
C'est bien ça ?
 


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
mood
Publicité
Posté le 05-01-2019 à 21:03:43  profilanswer
 

n°2327238
dede_sav
Posté le 05-01-2019 à 21:28:14  profilanswer
 

Il y a deux choses.
 
1) Il faut que chaque éléments soient identifiable indépendamment  
2) Il faut que la fonction javascript sache retrouver l’élément que tu veux afficher/cacher.
 
Donc le mieux est d'avoir soit un identifiant "constructible" du type "blabla_" + mavariable par exemple
ou carrément, tu donnes l'identifiant à la fonction javascript.
 
 
 

n°2327239
snowden
Posté le 05-01-2019 à 21:30:44  profilanswer
 

Ça y est, tu m'as totalement perdu. Je ne suis pas développeur web à la base et j'essaie juste de faire mon petit site en html pour ensuite venir en aide à d'autres personnes mais dans un autre domaine.
 
Donc là, j'avoue, c'est du chinois ton dernier post lol et je vois pas comment je vais régler ça.


Message édité par snowden le 05-01-2019 à 21:31:09

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327240
dede_sav
Posté le 05-01-2019 à 21:36:29  profilanswer
 

Code :
  1. <div id="ex1" onclick="off('ex1')"><span class="spank"><center><img src="./img_bash/ex1.gif"></center></span></div>
  2.                      <div><button onclick="on('ex1')">Voir un exemple animé</button></div>
  3. <div id="ex2" onclick="off('ex2')"><span class="spank"><center><img src="./img_bash/ex2.gif"></center></span></div>
  4.                      <div><button onclick="on('ex2')">Voir un exemple animé</button></div>


Code :
  1. function on(val) {
  2.         document.getElementById(val).style.display = "block";
  3.     }
  4.     function off(val) {
  5.         document.getElementById(val).style.display = "none";
  6.     }


Message édité par dede_sav le 05-01-2019 à 21:37:57
n°2327246
snowden
Posté le 05-01-2019 à 23:33:25  profilanswer
 

Merci pour ton script mais il ne fonctionne pas.
 
Testé sous Chromium et Firefox en vidant le cache.
Les images sont directement affichées sur la page html sans interactions sur les boutons.


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327262
rufo
Pas me confondre avec Lycos!
Posté le 06-01-2019 à 11:15:34  profilanswer
 

2 remarques :
- ton code HTML est absolument immonde (ça me rappelle la façon de coder de fin 1999). C'est un peu normal vu que tu dis ne pas être dév web. Ce qui m'amène à ma 2ème remarque qui est plutôt un conseil.
- laisse tombe d'essayer de faire un site web, ça va te prendre des plombes et ce sera mal fait. Donc prends un outil de type CMS genre Wordpress qui te permettra de faire un site propre sans trop te prendre la tête avec le codage (HTML/CSS/Javacsript). C'est gratuit, tu trouveras pleins de thèmes eux aussi gratuits pour habiller ton site et la plupart des hébergeurs permettent de faire fonctionner Wordpress. ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2327270
snowden
Posté le 06-01-2019 à 13:57:19  profilanswer
 

Mon code html n'est pas de moi. Il provient d'un script fourni sur codepen pour avoir un overlay.
 
Quant au CMS, je ne suis pas fan car je veux juste quelques pages web sans truc lourds...
 
Ce n'est pas un site qui va avoir comme but d'être alimenté en continu et/ou d'être un blog.
 
D'ailleurs, j'évite au maximum l'utilisation de javascript et j'essaie toujours de palier au besoin par du code css.
 
Je viens d'ailleurs de trouver un code html/css sans javascript qui me permet d'obtenir un overlay pour afficher mes animations gif.
 
Merci pour l'aide et les recommandations en tout cas.


Message édité par snowden le 06-01-2019 à 13:57:55

---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327277
MaybeEijOr​Not
but someone at least
Posté le 06-01-2019 à 15:57:23  profilanswer
 

Sinon en JS il y a "this".


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2327281
snowden
Posté le 06-01-2019 à 16:39:17  profilanswer
 

Trop compliqué pour mes connaissances :lol:


---------------
« A l’origine de toute erreur attribuée à l’ordinateur, vous trouverez au moins deux erreurs humaines. Dont celle consistant à attribuer l’erreur à l’ordinateur. »
n°2327307
rufo
Pas me confondre avec Lycos!
Posté le 07-01-2019 à 09:47:57  profilanswer
 

MaybeEijOrNot a écrit :

Sinon en JS il y a "this".


Au passage, c'est pas propre à javascript, "this", on le trouve aussi en c++, php et j'imagine, dans d'autres langages. ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Soucis avec script overlay.

 

Sujets relatifs
Comment faire ce script ?script à adapter
recherche script planing avec qr codeSoucis intégration date dans HTML/JSON
Soucis avec du code CSS sur HTML.script changement ip
Script de prolongation de compte bureautiqueDébutant en C rencontre quelques soucis...
php - script de récupération infos systèmescript vérification + redirection vers autre page
Plus de sujets relatifs à : Soucis avec script overlay.


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR