Javascript - Atteindre élément contenu dans div

Résolu/Fermé
Miimidedel Messages postés 345 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 5 juin 2019 - 19 oct. 2012 à 17:14
asmaanoor Messages postés 73 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 20 janvier 2014 - 21 oct. 2012 à 21:09
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

Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
19 oct. 2012 à 17:22
Au secours je veux bien mais essai deja de faire un
alert(document.getElementById("img_member").src);
0
Miimidedel Messages postés 345 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 5 juin 2019 71
19 oct. 2012 à 17:41
Ca m'affiche la src du premier personnage affiché..
0
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 209
20 oct. 2012 à 11:58
onclick="this.height=this.height*2;"
0
asmaanoor Messages postés 73 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 20 janvier 2014 18
20 oct. 2012 à 16:44
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>
0
Miimidedel Messages postés 345 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 5 juin 2019 71
20 oct. 2012 à 20:03
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..
0
Miimidedel Messages postés 345 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 5 juin 2019 71
20 oct. 2012 à 20:24
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 ?
0
asmaanoor Messages postés 73 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 20 janvier 2014 18
21 oct. 2012 à 01:27
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>
0
Miimidedel Messages postés 345 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 5 juin 2019 71
21 oct. 2012 à 19:15
Argh.. Ca ne marche pas ! Plus rien.. Ni changement du texte ni agrandissement de l'image ><
0
Miimidedel Messages postés 345 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 5 juin 2019 71
21 oct. 2012 à 19:18
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 !
0
asmaanoor Messages postés 73 Date d'inscription jeudi 23 août 2012 Statut Membre Dernière intervention 20 janvier 2014 18
21 oct. 2012 à 21:09
je t'en prie et désolé puiske je n'ai pas su comment t'aider,
bonne chance à nous tous
0