méthode sur un lien ?

par **artotal** » 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").

par **Cyrano** » 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!

par **artotal** » 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

par **Cyrano** » 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.

par **Cyrano** » 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.

par **artotal** » 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

par **Cyrano** » 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.

par **Ajoloca** » 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>

par **artotal** » 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

méthode sur un lien ?

Répondre

Étendre la vue Revue du sujet : méthode sur un lien ?

méthode sur un lien ?