Ne sélectionner que le div actif avec getElementsByClassName

Résolu

hharchi9 Messages postés 693 Statut Membre -
hharchi9 Messages postés 693 Statut Membre - 29 déc. 2014 à 19:33

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 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
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 Messages postés 693 Statut Membre 24
  
  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 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Oui.
  mais un Id est sensé être unique. .. il te faudra peut être modifier un peu ton code php.
  
  0
3. hharchi9 Messages postés 693 Statut Membre 24
  
  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 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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 Messages postés 693 Statut Membre 24
  
  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 Messages postés 693 Statut Membre 24

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 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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 Messages postés 693 Statut Membre 24

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 ?

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > hharchi9 Messages postés 693 Statut Membre

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)

<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 693 Statut Membre 24

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