Javascript - Atteindre élément contenu dans div

Résolu

Miimidedel Messages postés 345 Date d'inscription Statut Membre Dernière intervention -
asmaanoor Messages postés 73 Date d'inscription Statut Membre Dernière intervention - 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...

Afficher la suite

A voir également:

Javascript - Atteindre élément contenu dans div
Word a trouvé du contenu illisible - Guide
Telecharger javascript - Télécharger - Langages
Open element - Télécharger - HTML
Fusionner deux cellules excel en gardant le contenu - Guide
Impossible d'atteindre le serveur dhcp ✓ - Forum DHCP

4 réponses

Réponse 1 / 4

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

Au secours je veux bien mais essai deja de faire un

alert(document.getElementById("img_member").src);

Miimidedel Messages postés 345 Date d'inscription Statut Membre Dernière intervention 71

Ca m'affiche la src du premier personnage affiché..

Fallentree Messages postés 2309 Date d'inscription Statut Membre Dernière intervention 209

onclick="this.height=this.height*2;"

Réponse 2 / 4

asmaanoor Messages postés 73 Date d'inscription Statut Membre Dernière intervention 18

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>

Miimidedel Messages postés 345 Date d'inscription Statut Membre Dernière intervention 71

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

Réponse 3 / 4

Miimidedel Messages postés 345 Date d'inscription Statut Membre Dernière intervention 71

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 ?

Réponse 4 / 4

asmaanoor Messages postés 73 Date d'inscription Statut Membre Dernière intervention 18

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>

Miimidedel Messages postés 345 Date d'inscription Statut Membre Dernière intervention 71

Argh.. Ca ne marche pas ! Plus rien.. Ni changement du texte ni agrandissement de l'image ><

Miimidedel Messages postés 345 Date d'inscription Statut Membre Dernière intervention 71

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 !

asmaanoor Messages postés 73 Date d'inscription Statut Membre Dernière intervention 18

je t'en prie et désolé puiske je n'ai pas su comment t'aider,
bonne chance à nous tous

Discussions similaires

Contenue masqué

ca veut dire quoi wmg sur youtube ?

Pas d'internet - Impossible d'atteindre le serveur DHCP

java script error in the main process

Comment "inspecter l'élément" sur Mac ?

Votre réponse

Discussions similaires