Javascript - Atteindre élément contenu dans div

[Résolu/Fermé]
Signaler
Messages postés
352
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
5 juin 2019
-
Messages postés
73
Date d'inscription
jeudi 23 août 2012
Statut
Membre
Dernière intervention
20 janvier 2014
-
Salut,


Alors voilà..

J'ai sur mon site une boucle dynamique qui affiche photo + prénom/nom + statut de membre.

Les id sont les mêmes pour chaque personne (je sais ce n'est pas bien mais pour le moment ce n'est pas le souci - je reprends un code).


J'aimerais qu'au clic sur le prénom/nom l'image de portrait s'agrandisse / zoom..
J'arrive déjà à changer la couleur et la taille du texte.. Mais l'image étant dans une balise img.. Je ne l'atteins pas

Code HTML/PHP:


<div id="member_team"  onclick="chgColor(this);">
                            
                                    <?php
                                    if (file_exists("_i/about_us/".$data_member['image']."")) 
                                    {
                                    ?>
                                  
                                    <img src="_i/about_us/<?php echo $data_member['image'];?>" alt="photo member"  id="img_member" class="img_member"/>
                                    <?php
                                    } 
                                    else 
                                    { 
                                    ?>
                                    <img src="_i/about_us/noImage.jpg" width="105px" />
                                    <?php	  
                                    }
                                    ?>
                            
                                    <div id="description_membre" >
                                        <div id="nom_poste" class="chg_color">
                                            <p class="p_name_first">
                                            <div id="derouler" class="derouler" data-member-id="<?php echo $data_member['id'];?>">
												<?php echo $data_member['firstname'];?>
                                                	<br/><span class="name_member"><?php echo $data_member['name'];?></span>
                                             </div>
                                            </p>
                                            <span class="p_poste"><?php echo $data_member['poste_occupe'];?>  <?php echo $data_member['nom_entreprise'];?></span>
                                        </div>
                                    </div>
                                </div>



Ma fonction javascript :

 <script type="text/javascript">
var lastDiv = null;
function chgColor(currentDiv)
{
    currentDiv.style.color='#0076BD';
    currentDiv.style.fontSize='14pt';
    currentDiv.style.fontWeight='bold';
    

    
   
	if (lastDiv!=null)
	{
       
	 astDiv.style.color='#B5B5B5';
         lastDiv.style.fontSize='10pt';
         lastDiv.style.fontWeight='normal';
         
    
        
	}
 
	lastDiv = currentDiv;
}


</script> 




Au secours...

4 réponses

Messages postés
2295
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
22 juillet 2019
199
Au secours je veux bien mais essai deja de faire un
alert(document.getElementById("img_member").src);
Messages postés
352
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
5 juin 2019
68
Ca m'affiche la src du premier personnage affiché..
Messages postés
2295
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
22 juillet 2019
199
onclick="this.height=this.height*2;"
Messages postés
73
Date d'inscription
jeudi 23 août 2012
Statut
Membre
Dernière intervention
20 janvier 2014
16
j'ai modifié ton script et je pense que ca va marcher comme ca

<script type="text/javascript">
var lastDiv = null;
function chgColor(currentDiv)
{
currentDiv.style.color='#0076BD';
currentDiv.style.fontSize='14pt';
currentDiv.style.fontWeight='bold';
window.document.getElementById('img_member').style.width='500px';





if (lastDiv!=null)
{

astDiv.style.color='#B5B5B5';
lastDiv.style.fontSize='10pt';
lastDiv.style.fontWeight='normal';
window.document.getElementById('img_member').style.width='100px';



}

lastDiv = currentDiv;
}


</script>
Messages postés
352
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
5 juin 2019
68
Je te remercie mais malheureusement ça ne marche pas au top.. Quand je clique sur n'importe quelle personne ça agrandit la premier image (l'image du premier personnage)..
Et ça ne marche qu'une seule fois.. Genre je clique ça s'agrandit, je reclique ça se rétrécit mais si je réessaie ça ne marche plus..


J'ai entendu parler des childNodes.. J'ai essayé mais j'y arrive pas du tout ! Je trouve rien sur le net pour les utiliser..
Messages postés
352
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
5 juin 2019
68
J'ai tenté autre chose :

Code HTML -- Rajout d'un numéro après chaque id="img_member"

Les id son donc uniques.


<div id="member_team"  onclick="chgColor(this, <?php echo $data_member['id'];?>);">
                            
                                    <?php
                                    if (file_exists("_i/about_us/".$data_member['image']."")) 
                                    {
                                    ?>
                                  
                                    <img src="_i/about_us/<?php echo $data_member['image'];?>" alt="photo member"  id="img_member<?php echo $data_member['id'];?>" class="img_member"/>
                                    <?php



Dans mon javascript je fais ça :

function chgColor(currentDiv, num)
{
  var pix = "img_member" + num;
    currentDiv.style.color='#0076BD';
    currentDiv.style.fontSize='14pt';
    currentDiv.style.fontWeight='bold';
    currentDiv.style.textShadow='-0.1em 0.1em 0.2em #B5B5B5';
    document.getElementById(pix).style.width='130px';
    
   
    
   
	if (lastDiv!=null)
	{
         lastDiv.style.color='#B5B5B5';
         lastDiv.style.fontSize='10pt';
         lastDiv.style.fontWeight='normal';
         lastDiv.style.textShadow='none';
         document.getElementById(pix).style.width='115px'; 
		
         
	}
 alert(pix);
	lastDiv = currentDiv;
	var pix = "";
}



Problème.. Ca change bien la grandeur de l'image associée (la bonne enfin !) quand je clique sur n'importe quelle personne mais ça ne marche qu'une fois. Si je clique sur qqn d'autre ça ne marche pas.. Pourtant mon alert(pix); affiche bien l'id de la personne sur laquelle j'ai cliqué mais apparemment ça passe dans les deux boucles donc width vaut 105 de base puis 130 puis 115.. Quelle condition devrais-je mettre ?
Messages postés
73
Date d'inscription
jeudi 23 août 2012
Statut
Membre
Dernière intervention
20 janvier 2014
16
Sincerement je n'ai pas bien compris ton probleme mais j'ai essayé co meme,
essaye ca si c'est pas ce que tu veux, j'espère que tu m'expliques un peu plus et on va atteindre l'objectif Inchaalah :)

<script language='javascript'>
lastDiv='';
function chgColor(currentDiv, num)
{
var pix = "img_member" + num;
if(document.getElementById(pix).style.width=='115px')
{
currentDiv.style.color='#0076BD';
currentDiv.style.fontSize='14pt';
currentDiv.style.fontWeight='bold';
currentDiv.style.textShadow='-0.1em 0.1em 0.2em #B5B5B5';
document.getElementById(pix).style.width='130px';
}
if((document.getElementById(pix).style.width=='130px')&&(lastDiv!='')&&(lastDiv!=currentDiv))
{
lastDiv.style.color='#B5B5B5';
lastDiv.style.fontSize='10pt';
lastDiv.style.fontWeight='normal';
lastDiv.style.textShadow='none';
document.getElementById(pix).style.width='115px';
}
lastDiv = currentDiv;
var pix = "";
}
</script>
Messages postés
352
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
5 juin 2019
68
Argh.. Ca ne marche pas ! Plus rien.. Ni changement du texte ni agrandissement de l'image ><
Messages postés
352
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
5 juin 2019
68
Oh ça y est c'est bon =) ! J'ai fait :
var lastDiv = null;
var lastPix = null;
function chgColor(currentDiv, num)
{
  var pix = "img_member" + num;
  
	
    currentDiv.style.color='#0076BD';
    currentDiv.style.fontSize='14pt';
    currentDiv.style.fontWeight='bold';
    currentDiv.style.textShadow='-0.1em 0.1em 0.2em #B5B5B5';
    document.getElementById(pix).style.width='130px';
    
   
    
   
	
	if(lastDiv!=null && lastPix != null)
	{
         lastDiv.style.color='#B5B5B5';
         lastDiv.style.fontSize='10pt';
         lastDiv.style.fontWeight='normal';
         lastDiv.style.textShadow='none';
         document.getElementById(lastPix).style.width='115px'; 
		
	}

	lastDiv = currentDiv;
	lastPix = pix;
}



Ha !! Merci pour ton aide en tout cas !
Messages postés
73
Date d'inscription
jeudi 23 août 2012
Statut
Membre
Dernière intervention
20 janvier 2014
16
je t'en prie et désolé puiske je n'ai pas su comment t'aider,
bonne chance à nous tous