garder le style du lien

**dev RC0** · 11/04/2012, 09h11

Bonjour à tous,

Je suis en stage et je fais un annuaire.
Sur une partie de ce dernier, je liste les personnels situés à un étage.
Toute ma ligne (Nom Prenom Telephone) est un lien, ce qui me permet de la rendre entièrement cliquable. Jusque là tout va bien...

J'ai appliqué un style en CSS pour changer son aspect au passage de la sourris. (monid:hover). PIECE JOINT1 (capture1.gif)

Au moment du clic, je fais apparaître une div en dessous qui contient d'autres infos (nom du service, numéro de bureau, @mail, etc...) avec un petit script javascript qui va bien, trouvé sur la toile.(Pas de souci de ce coté là, je l'ai étudier et je le comprends. 3 fonctions, une qui apparaît, une qui cache et une conditionelle qui choisit). PIECE JOINTE2 (capture2.gif)

Mon souci est qu' une fois la div ouverte, si je bouge le curseur de la zone du lien, le "hover" se perd puisque je ne suis plus dessus....PIECE JOINTE3 (capture3.gif)

J'aimerai moi que tant que la div n'est pas refermée, la ligne reste dans le style du hover, que je bouge le curseur ou non....
Et là je ne vois pas bien comment faire...

Merci d'avance pour quelques pistes ou lumières...
Bonne journée à tous.

**Atomya Rise** · 11/04/2012, 12h27

Pourrais t-on voir ton code ?

**dev RC0** · 11/04/2012, 14h21

Oui biensur, pardon..
Le code dans la fonction php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
function _affiche_fiches_sommaire($p_fiche_som){
        for ($index = 0; $index < count($p_fiche_som); $index++) {
            ?>
 
            <script src="./ressources/js/essaiCache.js" type="text/javascript"></script>
            <a onClick="Afficher('<?php echo $p_fiche_som[$index]->_get_id_pers() ?>');" style="cursor:pointer;" id="boutton1">
                <div id="haut_som">
                     <div id="nom_som"><?php echo $p_fiche_som[$index]->_get_nom(); ?></div>
                     <div id="prenom_som"><?php echo $p_fiche_som[$index]->_get_prenom(); ?></div>
                     <div id="tel"><?php echo $p_fiche_som[$index]->_get_tel_fixe(); ?></div>
                </div>
            </a>
            <div id="<?php echo $p_fiche_som[$index]->_get_id_pers() ?>" style="display: none;" style="visibility: hidden">  
                        <div id="gauche_som"  class="full2">
                            <div id="grade"><?php echo $p_fiche_som[$index]->_get_grade(); ?></div>
                            <div id="service"><?php echo 'Service :    ' . $p_fiche_som[$index]->_get_service(); ?></div>
                            <div id="sous_service"><?php echo 'Sous-service :    ' . $p_fiche_som[$index]->_get_sous_service(); ?></div>
                        </div>
 
                        <div id="droite_som"  class="full2">
                            <div id="bureau"><?php echo 'Bureau:  ' . $p_fiche_som[$index]->_get_bureau(); ?></div>
                            <div id="etage"><?php echo $p_fiche_som[$index]->_get_libetage() ?></div>
                            <div id="courriel"><a href="mailto:<?php echo $p_fiche_som[$index]->_get_courriel(); ?>"><?php echo $p_fiche_som[$index]->_get_courriel(); ?></a></div>
                            <div id="lien_som">
                                <a onClick="Cacher('<?php echo $p_fiche_som[$index]->_get_id_pers() ?>');" style="cursor:pointer;" id="boutton1"><img src="./ressources/images/croix.png"/></a>
                            </div>
                        </div>
                    </div>
            <?php
        }
    }

Le code du script javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
function AfficherOuCacher(obj)
	{
	if (Visible == false) // SI L'OBJET N'EST PAS VISIBLE
		{
		Afficher(obj) // RENVOIE A LA FONCTION AFFICHER
		}
	else // SINON
		{
		Cacher(obj) // RENVOIE A LA FONCTION CACHER
		}
	}
function Afficher(obj)
	{
	var id = 'boutton'+obj;
	document.getElementById(obj).style.display = ''; // AFFICHE LE COMPOSANT
	document.getElementById(id).innerHTML = '<a onMouseOver="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Cacher</a>'; // CHANGE "AFFICHER" EN "CACHER"
	Visible = true; // OBJET EST MAINTENANT VISIBLE
	}
 
function Cacher(obj)
	{
	var id = 'boutton'+obj;
	document.getElementById(obj).style.display = 'none'; // CACHE LE COMPOSANT
	document.getElementById(id).innerHTML = '<a onMouseOut="AfficherOuCacher();" style="cursor:pointer;" id="'+id+'">Afficher</a>'; // CHANGE "CACHER" EN "AFICHER"
	Visible = false; // OBJET EST MAINTENANT CACHE
	}

**Doopeijii** · 11/04/2012, 15h52

Tu peux pas faire une fonction javascript appelée sur l'evenement onMouseOver qui définie le style de ta ligne quand tu passe dessus et dans une autre fonction appelée par onmouseout tu lui rends son style de base? (avec une condition pour dire "si ma div est pas cachée alors je laisse le style un peu sexy") enfin ça doit être faisable je pense bien ^^.

**Atomya Rise** · 11/04/2012, 17h06

Sachant que je n'y connais rien en javascript puisque je n'utilise que jQuery.. (pardonner ma simplicité... :p) je me suis tout de même penché sur ton soucis...

Voilà ce que je te propose :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a.clicLien { color: red; font-weight: normal; }
	a.clicLien:hover { color: blue; font-weight: normal; }
	a.clicLienActif { color: blue; font-weight: normal; }

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function AfficherOuCacher(obj) {
	if (Visible == false) { // SI L'OBJET N'EST PAS VISIBLE
		Afficher(obj) // RENVOIE A LA FONCTION AFFICHER
 
	} else { // SINON
		Cacher(obj) // RENVOIE A LA FONCTION CACHER
	}
}
function Afficher(obj) {
	var id = 'boutton'+obj;
	document.getElementById(obj).style.display = ''; // AFFICHE LE COMPOSANT
	document.getElementById("boutton1").className = "clicLienActif"; // On modifie la class du lien
	Visible = true; // OBJET EST MAINTENANT VISIBLE
}
 
function Cacher(obj) {
	var id = 'boutton'+obj;
	document.getElementById(obj).style.display = 'none'; // CACHE LE COMPOSANT
	document.getElementById("boutton1").className = "clicLien"; // On modifie la class du lien
	Visible = false; // OBJET EST MAINTENANT CACHE
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<a onClick="Afficher('index123');" class="clicLien" style="cursor:pointer;" id="boutton1">
	<div id="haut_som">
		 <div id="nom_som">Le lien pour ouvrir la div concerné</div>
	</div>
</a>
 
<div id="index123" style="display: none;">  
	<div id="gauche_som"  class="full2">
		<div id="grade">La div caché qui s'affichera lors du clic sur le lien</div>
	</div>
 
	<div id="droite_som"  class="full2">
		<div id="lien_som">
			<a onClick="Cacher('index123');" style="cursor:pointer;" id=""><b>X</b></a>
		</div>
	</div>
</div>

Bien entendu, je ne sais pas du tout si cela est "propre", mais ça fonctionne...

En gros, j'ai ajouté une class sur ton lien cliquable et je change cette classe selon l'état...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("boutton1").className = "LaClassDesirée";

A toi d'essayer d'adapter ceci à ton code si c'est bien ce que tu cherches...

**dev RC0** · 23/04/2012, 11h28

OK, pardon pour le temps de reponse, j'etais sur tout à fait autre chose...
Je vais essayer ça dans la journée et vous tiens au courrant..

Merci..

garder le style du lien

HTML

Vue hybride

Discussions similaires

Partager

Partager