[JS] Bouton + et -

boutons pour afficher et cacher du texte

Sujet résolu

9 septembre 2006 à 21:08:22

Hello,

Voilà j'aimerai faire un bouton + et - pour mes menus.

Je pense que c'est fait en javascript mais je n'en suis point sûr.

Je n'ai aucune idée comment m'y prendre j'ai essayé de regardé le code source de plusieur page mais je n'y trouve rien.

Exemple :
http://www.animeka.com/fansub/index.html
Pour chaque sortie il y a un bouton + et -

http://www.javascriptfr.com/
A gauche pour le menu.

En vous remerciant d'avance pour votre prompte rèponse.

nelping

9 septembre 2006 à 21:37:17

Voici une adresse :
http://www.g1script.com/home/LANGAGE/JS/script/menu/253.php
Essaie voir si ça marche, je pense que c'est ce que tu veux.

shuss

9 septembre 2006 à 21:39:57

Oui c'est du javascript, et c'est relativement simple.

Bon, imaginons ton code HTML pour chaque truc qui utilise + et - :

<div class="cathegorie">
<h4><img src="images/plus.png" alt="boutton pour développer la cathégorie" title="cliquez pour développer" onclick="developper(this)"/>titre de la cathégorie</h4>
<div class="infos">Informations sur la cathégorie ...</div>
</div>

Bon, c'est un code relativement simple : chaque div de class "cathégorie" représente une cathégorie développable, l'image, c'est le bouton pour développer, elle est dans un h4 qui représente le titre de la cathégorie, une autre div représente sont contenu (on peut sûrement changer les balises pour être plus sémantique ...). Remarquons que les div de class "infos" auront un display: none; .

Maintenant, voilà le code JavaScript qui irait avec :

// définition des deux variables qui représenterons le chemin vers les images de + et de -.
var imagePlus = "images/plus.png";
var imageMoins = "images/moins.png";

// et notre fonction developper :
function developper(image)
{
var contenu = image.parentNode.ParentNode.getElementByTagName('div');
if(image.src == imagePlus)
{
contenu.style.display = 'block';
image.src = imageMoins;
}
else
{
contenu.style.display = 'none';
image.src = imagePlus;
}
}

Là aussi c'est simple, on regarde quel était l'URL de l'image de +, et on fait les modifs en conséquenses.

Voilà, je n'ai aps pris la peine de tester, donc dis s'il y a un problême !

[JS] Bouton + et -

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

[JS] Bouton + et -

boutons pour afficher et cacher du texte

[JS] Bouton + et -

Supprimer

Modérer

Signaler le message aux modérateurs