Ne sélectionner que le div actif avec getElementsByClassName
Résolu/Fermé
hharchi9
Messages postés
567
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
1 juillet 2015
-
17 déc. 2014 à 22:40
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 - 29 déc. 2014 à 19:33
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 - 29 déc. 2014 à 19:33
A voir également:
- Ne sélectionner que le div actif avec getElementsByClassName
- Div c++ - Télécharger - Langages
- Sélectionner texte pdf - Guide
- Moyenne.si.ens #div/0 ✓ - Forum Excel
- Évariste souhaite télécharger le logiciel 7-zip depuis le site de son éditeur. sélectionnez le résultat de recherche sur lequel il doit cliquer. - Forum Compression
- Actif il y a 2 heures messenger ✓ - Forum Facebook
2 réponses
jordane45
Messages postés
38161
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 mai 2024
4 657
17 déc. 2014 à 23:30
17 déc. 2014 à 23:30
Bonjour,
Tu peux utiliser l'évent : onmouseove sur tes div..
https://www.w3schools.com/jsref/event_onmouseover.asp
Et tes fonctions show/hide deviendraient :
Tu peux utiliser l'évent : onmouseove sur tes div..
https://www.w3schools.com/jsref/event_onmouseover.asp
<div id='ma_div' onmouseover='show(this.id);' onmouseleave='hide(this.id)'> </div>
Et tes fonctions show/hide deviendraient :
function show(idElm) { document.getElementsById(idElm).style.display = 'block'; } function hide(idElm) { document.getElementsById(idElm).style.display = 'none'; }
hharchi9
Messages postés
567
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
1 juillet 2015
24
Modifié par hharchi9 le 29/12/2014 à 15:57
Modifié par hharchi9 le 29/12/2014 à 15:57
Bonjour,
Voici mon code :
Voici mon code :
<ul> <?php try { // On se connecte à MySQL $bdd = new PDO(sprintf('mysql:host=%s;dbname=%s', $host, $dbname), $user, $pass); } catch(Exception $e) { // En cas d'erreur, on affiche un message et on arrête tout die('Erreur : '.$e->getMessage()); } // Si tout va bien, on peut continuer : $reponse= $bdd->query("SELECT * FROM films "); while ($donnees = $reponse->fetch()) { $id='"'.'caption'.$donnees['id'].'"'; $id1="'".'caption'.$donnees['id']."'"; ?> <li> <div class="item"> <a href="#"><img src="<?php echo $donnees['affiche']; ?>" width="185" height="247" onMouseOver="shows(<?php echo $id1;?>)"/></a></a> <div id=<?php echo $id;?> onMouseOut="hides(<?php echo $id1;?>)"> <a href = "#" > <?php echo $donnees['Titre'];?> </a> <a href = "#" ><p> <?php echo $donnees['Synopsis'];?> </p></a> </div> </div> </li> <!--<li><a href="<?php //echo $donnees['lien']; ?>"><img src="<?php //echo $donnees['affiche']; ?>" width="185" height="247" onMouseOver="show()"/></a></li>!--> <?php } $reponse->closeCursor(); // Termine le traitement de la requête ?> </ul>
<style> body { font-family:arial; } .item { width:185px; height:247px; margin:5px 5px 5px 0; overflow:hidden; position:relative; } img { border:0; position:absolute; } ul { margin: 0 ; padding: 0 ; list-style: none ; margin-bottom: 40px; margin-top: 10px; padding-top: 4px; padding-bottom: 4px; margin: auto; width: 80%; } ul li{ display: inline-block; width:185px; height:247px; } <?php $reponse= $bdd->query("SELECT * FROM films "); while ($donnees = $reponse->fetch()) { ?> #caption<?php echo $donnees['id'];?>{ width:185px; height:247px; background-color: rgba(240, 239, 232, 0.68); color:#fff; font-weight:bold; position:absolute; display:none; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;} #caption<?php echo $donnees['id'];?> a { opacity: 1; text-decoration:none; /* color:#0cc7dd;*/ color:black; font-weight: bold; font-size:16px; padding:2px; padding-top: 3px; display: inherit; } #caption<?php echo $donnees['id'];?> p { opacity: 1; padding:5px; margin:0; font-size:13px; color: black; text-shadow: #FEFEFE 1px 1px, #FEFEFE -1px 1px, #FEFEFE -1px -1px, #FEFEFE 1px -1px; font-weight: normal; } <?php } $reponse->closeCursor(); // Termine le traitement de la requête ?> </style>
function shows(id) { var objet = document.getElementById(id); objet.style.display = 'block'; } function hides(id) { var objet = document.getElementById(id); objet.style.display = 'none'; }
jordane45
Messages postés
38161
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 mai 2024
4 657
29 déc. 2014 à 16:28
29 déc. 2014 à 16:28
Ah ouais.....
En effet... donc... tu utilises... pour ton CSS ... les ID ....
.. et donc forcément.. de cette manière.. tu te vois obligé de créer autant de css que tu as d' ID.....
Donc.. pour ne pas avoir à faire cela... il te suffit d'utiliser UNE CLASS.
et dans ton css ... à la place de :
Mettre simplement :
En effet... donc... tu utilises... pour ton CSS ... les ID ....
#caption<?php echo $donnees['id'];?>{
.. et donc forcément.. de cette manière.. tu te vois obligé de créer autant de css que tu as d' ID.....
Donc.. pour ne pas avoir à faire cela... il te suffit d'utiliser UNE CLASS.
<div class="lenomdelaclass" id="<?php echo $id;?>" onMouseOut="hides(<?php echo $id1;?>)"> <a href = "#" > <?php echo $donnees['Titre'];?> </a> <a href = "#" ><p> <?php echo $donnees['Synopsis'];?> </p></a> </div>
et dans ton css ... à la place de :
#caption<?php echo $donnees['id'];?>
Mettre simplement :
.lenomdelaclass{ width:185px; height:247px; background-color: rgba(240, 239, 232, 0.68); color:#fff; font-weight:bold; position:absolute; display:none; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;} .lenomdelaclass a { opacity: 1; text-decoration:none; /* color:#0cc7dd;*/ color:black; font-weight: bold; font-size:16px; padding:2px; padding-top: 3px; display: inherit; } .lenomdelaclass p { opacity: 1; padding:5px; margin:0; font-size:13px; color: black; text-shadow: #FEFEFE 1px 1px, #FEFEFE -1px 1px, #FEFEFE -1px -1px, #FEFEFE 1px -1px; font-weight: normal; }
hharchi9
Messages postés
567
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
1 juillet 2015
24
29 déc. 2014 à 17:19
29 déc. 2014 à 17:19
Ah oui c'est bien plus simple en effet !
Je n'y avais pas pensé !
Cependant j'ai un petit "souci" : sur ma page de test, en survolant plusieurs affiches de haut en bas, certains synopsis restent affichés alors qu'ils ne sont pas survolés. Existe-t-il une solution pour répondre à ceci ?
Je n'y avais pas pensé !
Cependant j'ai un petit "souci" : sur ma page de test, en survolant plusieurs affiches de haut en bas, certains synopsis restent affichés alors qu'ils ne sont pas survolés. Existe-t-il une solution pour répondre à ceci ?
jordane45
Messages postés
38161
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
5 mai 2024
4 657
>
hharchi9
Messages postés
567
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
1 juillet 2015
29 déc. 2014 à 17:25
29 déc. 2014 à 17:25
Je suppose que ton souci vient du fait que tu as fait apparaitre des éléments....et que tu ne les a pas masqué après...
Le plus simple serait, dans ta fonction show, de forcer le "masquage" de tous les éléments..puis d'afficher celui que tu veux uniquement....( là aussi.. utilise une CLASS pour le gérer)
et donc ta fonction shows deviendrait :
Le plus simple serait, dans ta fonction show, de forcer le "masquage" de tous les éléments..puis d'afficher celui que tu veux uniquement....( là aussi.. utilise une CLASS pour le gérer)
<script type="text/javascript"> // Pour les "vieux" Navigateurs < IE9 if (typeof document.getElementsByClassName!='function') { document.getElementsByClassName = function() { var elms = document.getElementsByTagName('*'); var ei = new Array(); for (i=0;i<elms.length;i++) { if (elms[i].getAttribute('class')) { ecl = elms[i].getAttribute('class').split(' '); for (j=0;j<ecl.length;j++) { if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) { ei.push(elms[i]); } } } else if (elms[i].className) { ecl = elms[i].className.split(' '); for (j=0;j<ecl.length;j++) { if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) { ei.push(elms[i]); } } } } return ei; } } // Masque tous les élements d'une CLASS function HideAllElemByCLassName(class_name){ var ArrElem = document.getElementsByClassName(class_name); for ( x=0;x<ArrElem.length;x++){ //console.log(ArrElem[x].id); ArrElem[x].style.display = "none"; } }
et donc ta fonction shows deviendrait :
function shows(id) { HideAllElemByCLassName("lenomdelaclass"); var objet = document.getElementById(id); objet.style.display = 'block'; }
hharchi9
Messages postés
567
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
1 juillet 2015
24
29 déc. 2014 à 19:33
29 déc. 2014 à 19:33
En effet, le problème venait de là. Mon souci est désormais résolu.
Vraiment un grand merci à vous ! Merci pour m'avoir consacré de votre temps.
Bonne continuation à vous,
hharchi9
Vraiment un grand merci à vous ! Merci pour m'avoir consacré de votre temps.
Bonne continuation à vous,
hharchi9
18 déc. 2014 à 09:05
Tout d'abord merci pour votre réponse..
Etant donné que je dois afficher plusieurs affiche, toutes les div portent la même classe ou le même id (car elles sont gérées par php qui est lié à une base de données), cette méthode est-elle encore valable ?
18 déc. 2014 à 09:19
mais un Id est sensé être unique. .. il te faudra peut être modifier un peu ton code php.
18 déc. 2014 à 09:23
18 déc. 2014 à 10:07
Mais sans connaitre la structure de tes tables ni ton code PHP.. difficile de t'en dire plus ...
Modifié par hharchi9 le 18/12/2014 à 17:24
Ma base contient un champ id, le titre et le synopsis des films. Le truc c'est que l'affichage est variable, dans ce code je les affiche tous mais sur d'autres pages, je n'en afficherai que quelques-uns