Soucis avec script overlay.

Soucis avec script overlay. - HTML/CSS - Programmation

Marsh Posté le 05-01-2019 à 19:50:19    

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>
  5. Exemple 2 :
  6. <div id="overlay" onclick="off()"><span class="spank"><center><img src="./img_bash/ex2.gif"></center></span></div>
  7.                      <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. }
  15. .spank {
  16.   text-align: center;
  17.   margin: 0;
  18.   margin-top: 160px;
  19.   display: block;
  20.   font-weight: bold;
  21.   color: red;
  22. }
  24. button {
  25.   margin-right: 5%;
  26.   margin-left: 5%;
  27.   padding: 3px;
  28.   background-color: white;
  29.   color: red;
  30.   border: 1px solid red;
  31.   border-radius: 3px;
  32.   cursor: zoom-in;
  33.   font-size: 11px;
  34.  
  35. }
  37. button:hover {
  38.   background-color: #13b524;
  39.   color: white;
  40.   border: 1px solid;
  41.   border-radius: 3px;
  42. }


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

Marsh Posté le 05-01-2019 à 19:50:19   

Reply

Marsh Posté le 05-01-2019 à 20:14:20    

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
Reply

Marsh Posté le 05-01-2019 à 20:15:24    

Oui pas de soucis, voici le script :
 

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


---------------
« 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. »
Reply

Marsh Posté le 05-01-2019 à 20:18:20    

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 ?  

Reply

Marsh Posté le 05-01-2019 à 20:20:48    

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

Marsh Posté le 05-01-2019 à 20:36:13    

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)

Reply

Marsh Posté le 05-01-2019 à 20:38:08    

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
Reply

Marsh Posté le 05-01-2019 à 20:44:28    

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

Marsh Posté le 05-01-2019 à 20:55:45    

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

Reply

Marsh Posté le 05-01-2019 à 21:03:43    

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

Marsh Posté le 05-01-2019 à 21:03:43   

Reply

Marsh Posté le 05-01-2019 à 21:28:14    

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.
 
 
 

Reply

Marsh Posté le 05-01-2019 à 21:30:44    

Ç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. »
Reply

Marsh Posté le 05-01-2019 à 21:36:29    

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>
  5. <div id="ex2" onclick="off('ex2')"><span class="spank"><center><img src="./img_bash/ex2.gif"></center></span></div>
  6.                      <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
Reply

Marsh Posté le 05-01-2019 à 23:33:25    

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

Marsh Posté le 06-01-2019 à 11:15:34    

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 Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 06-01-2019 à 13:57:19    

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

Marsh Posté le 06-01-2019 à 15:57:23    

Sinon en JS il y a "this".

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 06-01-2019 à 16:39:17    

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

Marsh Posté le 07-01-2019 à 09:47:57    

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 Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed