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

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

A voir également:

Ne sélectionner que le div actif avec getElementsByClassName
Div c++ - Télécharger - Langages
Sélectionner texte pdf - Guide
É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
Moyenne.si.ens #div/0 ✓ - Forum Excel
Actif il y a 2 heures messenger ✓ - Forum Facebook

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
17 déc. 2014 à 23:30

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';
}

hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
18 déc. 2014 à 09:05

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 ?

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
18 déc. 2014 à 09:19

Oui.
mais un Id est sensé être unique. .. il te faudra peut être modifier un peu ton code php.

hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
18 déc. 2014 à 09:23

Comment faire pour avoir des id différents parce que sur certaines pages j'aurai 100 div à gérer contre 5 sur d'autres...

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
18 déc. 2014 à 10:07

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

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 18/12/2014 à 17: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

Réponse 2 / 2

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

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 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
29 déc. 2014 à 16:28

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 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
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 ?

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > 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

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 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
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

Discussions similaires

Que signifie "actif il y a x minutes" ?

Changer la résolution du signal actif

Pourquoi l'info "actif depuis "x" minutes" n'apparaît plus ?

Actif ou en ligne.

Téléchargement sur "Libre office"

Discussions similaires

Newsletters