Soucis avec script overlay.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Soucis avec script overlay.

snowden

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 :

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

CSS :

Code :

#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
cursor: zoom-out;
}
.spank {
text-align: center;
margin: 0;
margin-top: 160px;
display: block;
font-weight: bold;
color: red;
}
button {
margin-right: 5%;
margin-left: 5%;
padding: 3px;
background-color: white;
color: red;
border: 1px solid red;
border-radius: 3px;
cursor: zoom-in;
font-size: 11px;
}
button:hover {
background-color: #13b524;
color: white;
border: 1px solid;
border-radius: 3px;
}

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

Publicité

dede_sav

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

snowden

Oui pas de soucis, voici le script :

Code :

function on() {
document.getElementById("overlay" ).style.display = "block";
}
function off() {
document.getElementById("overlay" ).style.display = "none";
}

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

dede_sav

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 ?

snowden

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

dede_sav

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)

dede_sav

JS:

Code :

fonction on(num) {
document.getElementById("overlay_"+num ).style.display = "block";
}

HTML:

Code :

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

Message édité par dede_sav le 05-01-2019 à 20:38:23

snowden

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

dede_sav

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

snowden

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

Publicité

dede_sav

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.

snowden

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

dede_sav

Code :

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

Code :

function on(val) {
document.getElementById(val).style.display = "block";
}
function off(val) {
document.getElementById(val).style.display = "none";
}

Message édité par dede_sav le 05-01-2019 à 21:37:57

snowden

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

rufo

Pas me confondre avec Lycos!

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

snowden

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

MaybeEijOrNot

but someone at least

Sinon en JS il y a "this".

Message cité 1 fois

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

snowden

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

rufo

Pas me confondre avec Lycos!

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.

FORUM HardWare.fr

Programmation

HTML/CSS

Soucis avec script overlay.

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

Page générée en 0.071 secondes