garder le style du lien

Version imprimable

11/04/2012, 09h11
dev RC0

3 pièce(s) jointe(s)

garder le style du lien

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.
11/04/2012, 12h27
Atomya Rise

Pourrais t-on voir ton code ?

re garder style du lien

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

Code:

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:

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
	}

11/04/2012, 15h52
Doopeijii

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

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:

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:

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:

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:

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

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

23/04/2012, 11h28
dev RC0

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..
23/04/2012, 15h08
ouldfella

Citation:

si je bouge le curseur de la zone du lien, le "hover" se perd puisque je ne suis plus dessus

c'est normal puisque tu l'a géré en css.

dans ce cas il faut gérer le hover avec javascript ou jquery et non par css.
23/04/2012, 15h54
Atomya Rise

Citation:

Envoyé par ouldfella

c'est normal puisque tu l'a géré en css.

dans ce cas il faut gérer le hover avec javascript ou jquery et non par css.

Pour résumer, tu viens de répondre à ce message sans lire les discussions précédentes, sinon, tu aurais remarqué que ceci avait déjà été dit...
Message inutile.