Ne sélectionner que le div actif avec getElementsByClassName

Résolu

hharchi9 -

Bonsoir,

Je voudrais savoir s'il est possible avec javascript de sélectionner le seul div survolé par la souris.

Pour le moment j'utilise ces deux fonctions :


		function show() {
			//document.getElementsByClassName("caption").style.display = 'block';
			var elems = document.getElementsByClassName('caption');
			for(var i = 0; i < elems.length; i++) {
			elems[i].style.display = 'block';
		}
}
		function hide() {
			//document.getElementsByClassName("caption").style.display = 'none';
			var elems = document.getElementsByClassName('caption');
			for(var i = 0; i < elems.length; i++) {
			elems[i].style.display = 'none';
}
		}

Pour donner une application concrète, je souhaite afficher une liste d'affiche de films et au survol de l'une de ces affiches afficher le synopsis sur l'affiche en surimpression.

J'espère avoir été clair et si ce n'était pas le cas, je vous prierai de me demander des compléments.

En vous remerciant de m'avoir lu,

Cordialement,

hhachi9

Afficher la suite

2 réponses

Réponse 1 / 2
jordane45 Modérateur
Bonjour,

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';
}
```
0
1. hharchi9 Auteur
  
  Bonjour,
  
  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 ?
  
  0
2. jordane45 Modérateur
  
  Oui.
  mais un Id est sensé être unique. .. il te faudra peut être modifier un peu ton code php.
  
  0
3. hharchi9 Auteur
  
  Comment faire pour avoir des id différents parce que sur certaines pages j'aurai 100 div à gérer contre 5 sur d'autres...
  
  0
4. jordane45 Modérateur
  
  Ben quand tu créés tes div via ton PHP... tu peux mettre dans l' ID de tes DIV .. l'ID correspondant à ta BDD par exemple...
  Mais sans connaitre la structure de tes tables ni ton code PHP.. difficile de t'en dire plus ...
  
  0
5. hharchi9 Auteur
  
  Voici mon code php :
  <ul> <?php $reponse= $bdd->query('SELECT * FROM films'); while ($donnees = $reponse->fetch()) { ?> <li> <div id="item"> <a href="#"><img src="<?php echo $donnees['affiche']; ?>" width="185" height="247" onMouseOver="shows(this.id)"/></a></a> <div id="caption" onMouseOut="hides(this.id)"> <a href = "#" > <?php echo $donnees['Titre'];?> </a> <a href = "#" ><p> <?php echo $donnees['Synopsis'];?> </p></a> </div> </div> </li> <?php } $reponse->closeCursor(); // Termine le traitement de la requête ?> </ul>
  
  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
  
  0

hharchi9 Auteur

Bonjour,

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 Modérateur

Ah ouais.....
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 Auteur
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 ?
0

jordane45 Modérateur

@hharchi9Je 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)

<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 Auteur
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
0

Ne sélectionner que le div actif avec getElementsByClassName

2 réponses

Discussions similaires

Newsletters