[Résolu] Assombrir des images au chargement de la page par Jean-PAT - page 1

16 juillet 2019 à 9:11:01

bonjour,

Je vous écris aujourd'hui car j'ai un problème.

J'ai un site internet, et j'aimerai que lorsque je lance la page, des images s'assombrissent.

Pcq cet effet me permettra par la suite de faire en sorte que lorsqu'on clique sur une, ou plusieurs images, elles redeviennent comme au départ par un effet de sélection pour ensuite pouvoir leur implanter des valeurs grâce à leur name/id, puis les insérées en bdd...

Est-ce que ceci est possible en javascript?

Peut-être des images vous permettra d'y voir plus clair (je l'espère):

                                                                <legend>Produits Plein</legend>
                                                                        <div class="part-produits">
                                                                                    <img id="Lugdocase1" height="auto" src="Images_Produits/Valise/lugdocase_1_480x.png" title="Choisir la Lugdocase 1" alt="Lugdocase 1" style="border:solid 2px black; height:auto; width:10%;" onclick="javascript:viewImage('image');"/>
                                                                                    <img id="Lugdocase2" height="auto" src="Images_Produits/Valise/lugdocase_2_480x.png" title="Choisir la Lugdocase 2" alt="Lugdocase 2" style="border:solid 2px black; height:auto; width:10%;"/>
                                                                        </div>
                               <center><legend>Valise 1</legend>
                                <fieldset id="productions">
                                    <div class="part-productions">
                                            <img id="MC101" src="Images_Produits/Gabarits/MC1/MC101.png" title="Choisir la production du MC101" alt="MC101" style="height: 10% ; width: auto;"/>
                                            <img id="MC102" src="Images_Produits/Gabarits/MC1/MC102.png" title="Choisir la production du MC102" alt="MC102" style="height: 10% ; width: auto;"/>
                                            <img id="MC103" src="Images_Produits/Gabarits/MC1/MC103.png" title="Choisir la production du MC103" alt="MC103" style="height: 10% ; width: auto;"/>
                                            <img id="MC104" src="Images_Produits/Gabarits/MC1/MC104.png" title="Choisir la production du MC104" alt="MC104" style="height: 10% ; width: auto;"/>
                                            <img id="MC111" src="Images_Produits/Gabarits/MC1/MC111.png" title="Choisir la production du MC111" alt="MC111" style="height: 10% ; width: auto;"/>
                                            <img id="MC112" src="Images_Produits/Gabarits/MC1/MC112.png" title="Choisir la production du MC112" alt="MC112" style="height: 10% ; width: auto;"/>
                                            <img id="MC113" src="Images_Produits/Gabarits/MC1/MC113.png" title="Choisir la production du MC113" alt="MC113" style="height: 10% ; width: auto;"/>
                                    </div>
                                </fieldset>
                                </center>
                                <br/>
                                <center><legend>Valise 2</legend>
                                <fieldset id="productions_2">
                                    <div class="part-productions_2">
                                            <img id="MC201" src="Images_Produits/Gabarits/MC2/MC201.png" title="Choisir la production du MC201" alt="MC201" style="height: 10% ; width: auto;"/>
                                            <img id="MC202" src="Images_Produits/Gabarits/MC2/MC202.png" title="Choisir la production du MC202" alt="MC202" style="height: 10% ; width: auto;"/>
                                            <img id="MC203" src="Images_Produits/Gabarits/MC2/MC203.png" title="Choisir la production du MC203" alt="MC203" style="height: 10% ; width: auto;"/>
                                    </div>
                                </fieldset>
                                </center>
				<br/>                            
				<center><legend>Autres</legend>
                                <fieldset id="productions_3">
                                    <div class="part-productions_3">
                                            <img id="IC101" src="Images_Produits/Gabarits/IC101.png" title="Choisir la production du IC101" alt="IC101" style="height: 10% ; width: auto;"/>
                                            <img id="IC102" src="Images_Produits/Gabarits/IC102.png" title="Choisir la production du IC102" alt="IC102" style="height: 10% ; width: auto;"/>
                                    </div>
                                </fieldset>
                                </center>

Merci par avance de vos réponses !

KeiZed

16 juillet 2019 à 9:29:10

Tres simple je t'ai mis un petit exemple ici,

le but est de placer un voile noir par dessus ton image en css et de l'enlever ou de le rendre transparent lors d'un click

Tu peux adapter cet exemple facilement à ton code en mettant chaque image dans un conteneur comme je l'ai fait.

Tu peux adapter ensuite le javascript pour pouvoir envoyer des données coté serveur via Ajax par exemple :

https://codepen.io/KeiZ/pen/QXewyO

-
Edité par KeiZed 16 juillet 2019 à 9:32:43

Jean-PAT

16 juillet 2019 à 10:56:26

KeiZetsubou a écrit:

Tres simple je t'ai mis un petit exemple ici,

le but est de placer un voile noir par dessus ton image en css et de l'enlever ou de le rendre transparent lors d'un click

Tu peux adapter cet exemple facilement à ton code en mettant chaque image dans un conteneur comme je l'ai fait.

Tu peux adapter ensuite le javascript pour pouvoir envoyer des données coté serveur via Ajax par exemple :

https://codepen.io/KeiZ/pen/QXewyO

-
Edité par KeiZetsubou il y a environ 1 heure

J'ai bien pris en compte ton script merci bcp, mais celui ne se lance pas... Je ne comprends pas pk?

Voilà mon code :

<?php
  $repInclude = './include/';
  require($repInclude."_init.inc.php");
  $bdd = new PDO('mysql:host=127.0.0.1;dbname=bdd_suiviimprim3d;charset=utf8', 'root', '');
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>

        <html>
                <head>
                    <title>Suivi de production de l'entreprise NORMENJEU</title>
                    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <link href="style/Style_Doss.css" rel="stylesheet" type="text/css" /> 
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
                    <script>
                    const items = document.querySelectorAll('.images_pages');
                    items.forEach((item) => {
                    item.addEventListener('click', () => {
                    //Ici tu fais ce que tu veux 
                    item.classList.add('visible');
                        })
                    })
                    </script>
                </head>                                                

                <body>

                                    <?php
                                        require($repInclude."_sommaire.inc.php");
                                    ?>

                                    <div id="contenu">
                                                <form method="POST">
                                                        <legend>Entrer votre Dossier d'affaire :</legend>
                                                        
                                                        <div id='nDevi'>
                                                            <label for='txtDevis'>N° de Devis :</label> 
                                                                            <input type='text' id='txtDevis' name='txtDevis' class='Ndevis'  placeholder="#"/>
                                                                                <br/>
                                                                            <label for="txtClient"> Nom du client :</label>
                                                                            <input type='text' id='txtClient' name='txtClient' class='Nclient' placeholder="Entrer le client"/>
                                                                                <br/>
                                                                            <label for='Porteur'>Le porteur du dossier :</label> 
                                                                            <select name='Porteur' id='Porteur'class='PorteurDoss'>
                                                                                <option value="" selected='selected'>Porteur du dossier</option>
                                                                                <option value="Normenjeu">Normenjeu</option>
                                                                                <option value="Manecan">Manecan</option>
                                                                            </select></div>
                                                        
                                 <div class="images_pages">
                                                            <center>
                                                                <legend>Produits Plein</legend>
                                                                        <div class="part-produits">
                                                                                    <img id="Lugdocase1" height="auto" src="Images_Produits/Valise/lugdocase_1_480x.png" title="Choisir la Lugdocase 1" alt="Lugdocase 1" style="border:solid 2px black; height:auto; width:10%;" onclick="javascript:viewImage('image');"/>
                                                                                    <img id="Lugdocase2" height="auto" src="Images_Produits/Valise/lugdocase_2_480x.png" title="Choisir la Lugdocase 2" alt="Lugdocase 2" style="border:solid 2px black; height:auto; width:10%;"/>
                                                                        </div>
                                                                    <center><legend>Valise 1</legend>
                                                                     <fieldset id="productions">
                                                                         <div class="part-productions">
                                                                             <div class="item">
                                                                                 <img id="MC101" src="Images_Produits/Gabarits/MC1/MC101.png" title="Choisir la production du MC101" value="MC101" alt="MC101" style="height: 10% ; width: auto;"/>
                                                                             </div>
                                                                             
                                                                             <div class="item">
                                                                                 <img id="MC102" src="Images_Produits/Gabarits/MC1/MC102.png" title="Choisir la production du MC102" alt="MC102" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                             
                                                                             <div class="item">
                                                                                 <img id="MC103" src="Images_Produits/Gabarits/MC1/MC103.png" title="Choisir la production du MC103" alt="MC103" style="height: 10% ; width: auto;" />
                                                                             </div> 
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC104" src="Images_Produits/Gabarits/MC1/MC104.png" title="Choisir la production du MC104" alt="MC104" style="height: 10% ; width: auto;" />
                                                                             </div>  
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC111" src="Images_Produits/Gabarits/MC1/MC111.png" title="Choisir la production du MC111" alt="MC111" style="height: 10% ; width: auto;" />
                                                                             </div>  
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC112" src="Images_Produits/Gabarits/MC1/MC112.png" title="Choisir la production du MC112" alt="MC112" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                                
                                                                             <div class="item">
                                                                                 <img id="MC113" src="Images_Produits/Gabarits/MC1/MC113.png" title="Choisir la production du MC113" alt="MC113" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                             
                                                                             </div>
                                                                     </fieldset>
                                                                     </center>
                                                                     <br/>
                                                                     <center><legend>Valise 2</legend>
                                                                     <fieldset id="productions_2">
                                                                         <div class="part-productions_2">
                                                                                 <img id="MC201" src="Images_Produits/Gabarits/MC2/MC201.png" title="Choisir la production du MC201" alt="MC201" style="height: 10% ; width: auto;" />
                                                                                 <img id="MC202" src="Images_Produits/Gabarits/MC2/MC202.png" title="Choisir la production du MC202" alt="MC202" style="height: 10% ; width: auto;" />
                                                                                 <img id="MC203" src="Images_Produits/Gabarits/MC2/MC203.png" title="Choisir la production du MC203" alt="MC203" style="height: 10% ; width: auto;" />
                                                                         </div>
                                                                     </fieldset>
                                                                     </center>
                                                                     <br/>                            
                                                                     <center><legend>Autres</legend>
                                                                     <fieldset id="productions_3">
                                                                         <div class="part-productions_3">
                                                                                 <img id="IC101" src="Images_Produits/Gabarits/IC101.png" title="Choisir la production du IC101" alt="IC101" style="height: 10% ; width: auto;" />
                                                                                 <img id="IC102" src="Images_Produits/Gabarits/IC102.png" title="Choisir la production du IC102" alt="IC102" style="height: 10% ; width: auto;" />
                                                                         </div>
                                                                     </fieldset>
                                                                     </center>
                                                            </center>
                                    </div>
                                                        
                                                        <div id="bas de page">
                                                                        <br/>
                                                                                <label for="dateLivraison">Date de Livraison :</label>
                                                                                <input type="date" name="dateLivraison"/>
                                                                                <label for="SoldeCommande">Commande soldé quand :</label>
                                                                                <input type="date" name="SoldeCommande"/><br/><br/>
                                                                            <center>
                                                                                <input type="submit" name="ValiderGen" id="Imprimer" value="Valider les données saisies"/>
                                                                            </center><br/>
                                                                            <center>
                                                                                <a href="cDossAffaire.php">Pour visionner un  dossier d'affaire, cliquez-ici!</a>
                                                                            </center>
                                                                        </div>
                                                                    </form>
                                    </div>

                                        
                                            <!-- Optional JavaScript -->
                                            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
                                                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                                                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
                                                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>           
                </body>
        </html>

                <?php
                    include($repInclude."Insert_Produit.php");
                ?>

KeiZed

16 juillet 2019 à 11:01:38

car tu as mis le script en haut de page : du coup il se lance avant que tes éléments soient chargés, place le tout à la fin apres tes imports jquery

et ajoute ça avant et après le code (ça veut dire qu'il s’exécutera une fois la page chargé complètement) :

document.addEventListener('DOMContentLoaded', () => {

// Ton code ici

})

Jean-PAT

16 juillet 2019 à 11:16:31

KeiZetsubou a écrit:

car tu as mis le script en haut de page : du coup il se lance avant que tes éléments soient chargés, place le tout à la fin apres tes imports jquery

et ajoute ça avant et après le code (ça veut dire qu'il s’exécutera une fois la page chargé complètement) :
document.addEventListener('DOMContentLoaded', () => {

// Ton code ici

}

C'est bon tout fonctionne , merci beaucoup! Mais une autre question me taraude l'esprit :

Et si par exemple, après je veux récupérer les images actives(c'est-à-dire les images éclaircies) pour leurs implantées une valeur et les calculées puis les insèrées dans une bdd, comment, je pourrais faire stp?

-
Edité par Jean-PAT 16 juillet 2019 à 11:19:33

KeiZed

16 juillet 2019 à 11:25:29

Tu crée une fonction javascript que tu appel lors du clic d'un bouton par exemple :

selectedItems = document.querySelectorAll('.item.visible');

selectedItems.forEach((selectedItem) => {
  // Faire quelque chose ici avec ta variable selectedItem
})

Jean-PAT

16 juillet 2019 à 11:33:13

KeiZetsubou a écrit:

Tu crée une fonction javascript que tu appel lors du clic d'un bouton par exemple :
selectedItems = document.querySelectorAll('.item.visible');

selectedItems.forEach((selectedItem) => {
  // Faire quelque chose ici avec ta variable selectedItem
})

Mais si admettons, je veux leur mettre une valeur à chacune, je pourrais faire comment?

KeiZed

16 juillet 2019 à 12:09:14

Je ne vais pas faire l'application à ta place, mais il y'a beaucoup de possibilités comme l'utilisation des attributs data que tu peux extraire en js avant d'envoyer au serveur

<img data-valeur="ma _valeur">

Jean-PAT

16 juillet 2019 à 12:13:41

KeiZetsubou a écrit:

Je ne vais pas faire l'application à ta place, mais il y'a beaucoup de possibilités comme l'utilisation des attributs data que tu peux extraire en js avant d'envoyer au serveur
<img data-valeur="ma _valeur">

Loin de la l'idée que tu fasses l'application à ma place, mais c'etait juste une question.

Merci beaucoup pour ton aide....

Je mets mon sujet en résolu

Assombrir des images au chargement de la page

Supprimer

Modérer

Signaler le message aux modérateurs