Page 1 sur 1
méthode sur un lien ?
Posté : 24 oct. 2006, 21:54
par artotal
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
Posté : 24 oct. 2006, 22:07
par Ajoloca
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>
Posté : 24 oct. 2006, 22:20
par Cyrano
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.
Posté : 24 oct. 2006, 22:44
par artotal
// 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
Posté : 24 oct. 2006, 22:49
par Cyrano
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.
Posté : 24 oct. 2006, 23:16
par Cyrano
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.
Posté : 24 oct. 2006, 23:18
par artotal
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> |
Posté : 25 oct. 2006, 13:50
par Cyrano
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!
Posté : 25 oct. 2006, 14:18
par artotal
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").