méthode sur un lien ?

24 oct. 2006, 21:54

Bonjour,
je cherche à mettre un effet sur un lien.
http://creatif-web.be/assoc/effet_graphique_js.php
par contre je n'arrive pas à mettre deux méthodes sur un même lien
en effet je suis obligé d'utiliser un lien different, pour afficher et un pour masquer. Dans l'bsolu je cherche à avoir un lien qui affiche et qui masque
comme j'ai fait sur se site.
Merci

24 oct. 2006, 22:07

Bonsoir,
Si je comprends bien, tu voudrais que le même lien affiche ou masque une zone en fonction de l'état précedent.

Code : Tout sélectionner

<script type="text/JavaScript>
function reverseDisply(){
   var curStyle =document.getElementById('id_zone').style.display;
   var newStyle = curStyle == 'block' ? 'none' : 'block';
   document.getElementById('id_zone').style.display = newStyle;
}
</script>

24 oct. 2006, 22:20

Tu pourrais faire ça avec une seule et même méthode en utilisant l'identifiant de l'élément à afficher/masquer.
Tu peux même dans la foulée changer le texte du lien selon l'état. Exemple :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 24/10/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Afficher ou masquer un élément</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher(id_elt, id_lien)
{
    var etat = document.getElementById(id_elt).style.display;
    var nouveau = (etat == 'none') ? 'block' : 'none';
    document.getElementById(id_elt).style.display = nouveau;
    var txtlien = (etat == 'none') ? 'Masquer' : 'Afficher';
    document.getElementById(id_lien).innerHTML = txtlien;
}
/* ]]> */
</script>
</head>
<body>
<a href="#" title="Afficher ou masquer l'élément" onclick="afficher('monbloc', 'lienafficher')" id="lienafficher">Masquer</a>
<div id="monbloc" style="display: block; width: 200px; height: 200px; border: 1px solid #ccc; color: #000; background-color: #ccf; margin: 1em;">
 <p>Bla bla quelconque...</p>
</div>
</body>
</html>

Attention à ne pas oublier de mettre des identifiants, tant pour le lien lui-même que pour l'élément à masquer/afficher.

24 oct. 2006, 22:44

// trop fort cette fonction cyrano

j'ai repris ton exemple "Cyrano" pour montrer mon problème, je me sers de scriptaculous et prototype, c'est à partir de ces bibliothèque que je voudrai masquer et afficher sur un même lien.
http://creatif-web.be/assoc/afficher_masquer.php

PS: désolé pour mes espaces, j'ai un problème de clavier

24 oct. 2006, 22:49

En clair : pourquoi faire simple si on peut faire compliqué

Mais tu n'avais pas précisé ce détail à propos de Script.aculo.us et Prototype, je ne pouvais pas deviner. Il faut voir en fonction de la gestion par ces librairie comment marier cette fonction pour qu'elles soient compatibles et fonctionnent surtout ensemble. Si tu fais par exemple disparaitre le bloc par réduction, en cliquant ensuite sur "Masquer", ça l'affiche à nouveau, ce qui n'est pas le but du jeu j'imagine. Sans voir le reste du code, impossible de te répondre.

24 oct. 2006, 23:16

Ok, j'ai regardé d'un peu plus près et en fait tu voudrais la même chose mais avec les effets produits par les librairies. J'ai fait un test rapide, mais il semble y avoir un problème au niveau de la création de l'objet, je regarderai ça demain, le truc est sympa. Le principe est à priori le même à la base que ce que j'ai fait, il suffit d'appeler les librairies depuis la fonction.

24 oct. 2006, 23:18

oui je comprend, prototype, c'est du lourd :
http://creatif-web.be/assoc/js/scriptac ... ototype.js

http://creatif-web.be/assoc/js/scriptac ... aculous.js
j'ai donc essayer...

Code : Tout sélectionner

<script>
function display(calque)
{
	var style=document.getElementById(calque).style.display;
	// on évalue la valeur de style
	if (style == "none")
	{
	// si le calque est masqué on l'affiche
	document.getElementById(calque).style.display="block";
	new Effect.Grow('mytext', 1)
	}
	else if (style == new Effect.Grow('mytext', 1))
	{
	document.getElementById(calque).style.display="block";	
	new Effect.Shrink('mytext', 1)	
	}
	else
	return true;
}	
</script>

J'ai juste l'affichage.
<a href="#" onclick="display('mytext')">aaaa</a> |

Code : Tout sélectionner

25 oct. 2006, 13:50

Bon ben je l'ai eu, avec du mal parce qu'il manquait un paquet de librairies. mais bon, pas grave, ça foncitonne chez moi maintenant, voilà ce que ça donne :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 24/10/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Afficher ou masquer un élément</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/scriptaculous.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function changerLien(id_elt, id_lien)
{
    var etat = document.getElementById(id_elt).style.display;
    var txtlien   = (etat == 'none') ? 'Masquer' : 'Afficher';
    if(etat == 'none')
    {
        new Effect.Grow(id_elt, 1);
    }
    else
    {
        new Effect.Shrink(id_elt, 1);
    }
    document.getElementById(id_lien).innerHTML = txtlien;
}
/* ]]> */
</script>
</head>
<body>
<p><a href="./affichermasquer.html" title="Afficher ou masquer l'élément" onclick="changerLien('monbloc', 'lienafficher'); return false;" id="lienafficher">Masquer</a></p>
<div id="monbloc" style="display: block; width: 200px; height: 200px; border: 1px solid #ccc; color: #000; background-color: #ccf; margin: 1em;">
  <p>Bla bla quelconque...</p>
</div>
</body>
</html>

Enjoy!

25 oct. 2006, 14:18

Sûr sans les librairies, c'est hard.
J'admire la fonction implémentés.

Merci (car on ne l'utilise jamais assez "mot magique").

méthode sur un lien ?

Qui est en ligne