Html
hamdico
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
dans une page web je veux avoir un mot lorsque je clic dessus une arborescence des choix s'ouvre automatiquement ( je ne veux pas une liste de séquence mais des choix qui s'affichent avec des tirés avant par exemple ) , comment réaliser ça en html???
merci d'avance pour votre aide
dans une page web je veux avoir un mot lorsque je clic dessus une arborescence des choix s'ouvre automatiquement ( je ne veux pas une liste de séquence mais des choix qui s'affichent avec des tirés avant par exemple ) , comment réaliser ça en html???
merci d'avance pour votre aide
A voir également:
- Html
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
4 réponses
Il faut créer une div qui possède ton contenu, la mettre en hidden, et lors d'un clic, avec un peu de javascript, tu retire le hidden de ta div, qui va donc apparaitre
Salut !
Tu ne peux pas faire ça uniquement en HTML. Il va te falloir aussi un peu de CSS et de Javascript.
Le CSS, ça sert à définir comment ton HTML va s'afficher. Le Javascript, c'est le langage qui va régir les actions : qui va définir ce qui se passe quand tu cliques quelque part, quand tu appuies sur un bouton, etc.
Voici un exemple de HTML qui combine les trois :
Ça devrait fonctionner... Prends en note cependant, ce que je te donne là est du HTML très "sale". Tu vas devoir te renseigner sur le CSS et le Javascript, et assez vite tu vas pouvoir faire des scripts plus propres.
Bonne chance !!!
Tu ne peux pas faire ça uniquement en HTML. Il va te falloir aussi un peu de CSS et de Javascript.
Le CSS, ça sert à définir comment ton HTML va s'afficher. Le Javascript, c'est le langage qui va régir les actions : qui va définir ce qui se passe quand tu cliques quelque part, quand tu appuies sur un bouton, etc.
Voici un exemple de HTML qui combine les trois :
<div><a onmouseup="document.getElementById('liste').style.display='block';">Afficher</a></div>
<ul id="liste" style="display:none;">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li><a onmouseup="document.getElementById('liste').style.display='none';">Cacher</a></li>
</ul>
Ça devrait fonctionner... Prends en note cependant, ce que je te donne là est du HTML très "sale". Tu vas devoir te renseigner sur le CSS et le Javascript, et assez vite tu vas pouvoir faire des scripts plus propres.
Bonne chance !!!
je suis débutante en html (just je fais des modification sur des pages web qui sont déja créés par autrui) , je n'assimile pas votre réponce , priére de m'exipliquer mieu avec exemple si possible ( les balises à utiliser????) mérci
merci coeus , mais prière de m'expliquer encors ça : où doit on écrire le code css et le javascript??? en fait ,dans ton exemple ,où est le code css et le javascript???
Pour le CSS, tu as deux choix :
Soit tu crées un fichier nom_de_fichier.css que tu mets quelque part dans l'arborescence de ton site, et dans le <head> de ta page HTML, tu rajoutes la balise suivante pour les lier :
Ou alors, carrément, dans ta page HTML, tu crées une balise <style> et tu mets ton code CSS dedans.
Pour des exemples, regarde ici.
Pour le Javascript, c'est à peu près pareil. Tu peux te créer un fichier nom_de_fichier.js qui contient ton code Javascript. Tu mets ensuite cette balise dans ton fichier HTML (Moi je te conseille de la mettre entre ton </body> et ton </html>, mais tu peux aussi le mettre dans ton <head>, c'est plus propre) :
Ou alors, tu crées une balise <script type="text/javascript"> dans ton fichier HTML (là, ça se met un peu n'importe où, sauf entre certaines balises HTML spéciales) et tu mets ton JS dedans.
Exemples ici.
Le Javascript, tu peux l'appeler à partir de ton HTML. Par exemple, disons que tu as un élément <p>, auquel tu veux créer un événement : tu veux que, quand on clique dessus, ça t'affiche une alerte qui te dit "Hello !". Tu peux donc faire :
Il existe d'autres événements qui peuvent être détectés : un double-clic, la pesée sur une touche du clavier, etc. Regarde ici pour un peu plus de détails sur les événements.
Aussi, plus pratique quand l'événement à déclencher, tu pourrais faire :
Et, dans ton <head> (ou ailleurs), tu définis une fonction sayHello :
Donc, en gros, sur un clic sur ta balise de paragraphe, ça va invoquer la fonction sayHello(), et faire tout ce qui est contenu dedans.
Je te donne beaucoup d'infos d'un coup, tu as donc le choix de pousser plus loin ou d'intégrer seulement ce qui est nécessaire pour ton projet actuel... Mais si tu continues dans cette branche, ce sera très vite un must de maîtriser tout ça.
N'hésite pas si tu as d'autres questions, je suis un peu parti dans tous les sens, tu me diras si certains problèmes attirent plus ton attention ! ;-)
Soit tu crées un fichier nom_de_fichier.css que tu mets quelque part dans l'arborescence de ton site, et dans le <head> de ta page HTML, tu rajoutes la balise suivante pour les lier :
<link rel="stylesheet" type="text/css" href="chemin/vers/nom_de_fichier.css" />
Ou alors, carrément, dans ta page HTML, tu crées une balise <style> et tu mets ton code CSS dedans.
Pour des exemples, regarde ici.
Pour le Javascript, c'est à peu près pareil. Tu peux te créer un fichier nom_de_fichier.js qui contient ton code Javascript. Tu mets ensuite cette balise dans ton fichier HTML (Moi je te conseille de la mettre entre ton </body> et ton </html>, mais tu peux aussi le mettre dans ton <head>, c'est plus propre) :
<script type="text/javascript" src="chemin/vers/nom_de_fichier.js"></script>
Ou alors, tu crées une balise <script type="text/javascript"> dans ton fichier HTML (là, ça se met un peu n'importe où, sauf entre certaines balises HTML spéciales) et tu mets ton JS dedans.
Exemples ici.
Le Javascript, tu peux l'appeler à partir de ton HTML. Par exemple, disons que tu as un élément <p>, auquel tu veux créer un événement : tu veux que, quand on clique dessus, ça t'affiche une alerte qui te dit "Hello !". Tu peux donc faire :
<p onmouseup="alert('Hello !');">Clique ici.</p>
Il existe d'autres événements qui peuvent être détectés : un double-clic, la pesée sur une touche du clavier, etc. Regarde ici pour un peu plus de détails sur les événements.
Aussi, plus pratique quand l'événement à déclencher, tu pourrais faire :
<p onmouseup="sayHello();">Clique ici.</p>
Et, dans ton <head> (ou ailleurs), tu définis une fonction sayHello :
<script type="text/javascript">
function sayHello() {
alert("Hello !");
}
</style>
Donc, en gros, sur un clic sur ta balise de paragraphe, ça va invoquer la fonction sayHello(), et faire tout ce qui est contenu dedans.
Je te donne beaucoup d'infos d'un coup, tu as donc le choix de pousser plus loin ou d'intégrer seulement ce qui est nécessaire pour ton projet actuel... Mais si tu continues dans cette branche, ce sera très vite un must de maîtriser tout ça.
N'hésite pas si tu as d'autres questions, je suis un peu parti dans tous les sens, tu me diras si certains problèmes attirent plus ton attention ! ;-)
salut coeus,
j'ai encore des questions : je vai ecrire mon code comme ça :
<p onmouse="affiche();">portail </p>
puis:
<script type="text/javascript">
fonction affiche()
{
????
}
</style>
ce que je veux avoir est :
en clicant sur le mot "portail" ,on aura une liste contenant 2 choix:"smart1" et "smart2" ; chaque choix présente un lien vers une autre page web
1 question : je ne maitrise pas le java : si c possible donne moi cette partie de code (????) en java
2 question : ce code est -t-il correcte??
merci merci merci .....
j'ai encore des questions : je vai ecrire mon code comme ça :
<p onmouse="affiche();">portail </p>
puis:
<script type="text/javascript">
fonction affiche()
{
????
}
</style>
ce que je veux avoir est :
en clicant sur le mot "portail" ,on aura une liste contenant 2 choix:"smart1" et "smart2" ; chaque choix présente un lien vers une autre page web
1 question : je ne maitrise pas le java : si c possible donne moi cette partie de code (????) en java
2 question : ce code est -t-il correcte??
merci merci merci .....
Hey hey hey ! :-)
Petite correction amicale avant de commencer : Ce n'est pas du Java, c'est du Javascript. Je ne vais pas dans le détail, mais si tu veux regarde sur Wiki, y a une énorme différence. Just so you know ;-)
Ton code est correct, appart deux petite fautes d'orthographe :
1. Ce n'est pas onmouse="affiche();" mais onmouseup="affiche();" ;
2. Ce n'est pas fonction affiche() { mais function affiche() { (Eh oui, que veux-tu, l'anglais, toujours l'anglais !!!)
Appart ça, pour afficher/cacher des éléments, le plus facile est de faire une fusion de Javascript et de CSS. En CSS, tu as l'attribut display qui peut être mis à block, inline, inline-block, none, etc.
Référence rapide ici pour CSS : display
Donc pour changer le display d'un élément via Javascript, il faut d'abord que l'élément cible (un <ul>, dans ton cas) soit identifié par un ID. Rien de plus simple :
Ensuite, tu vas aller "chercher" cet ID avec Javascript dans ta fonction affiche(), et tu vas définir son style de manière à ce que ce soit visible :
Et ensuite tu n'auras plus qu'à faire un autre bouton ou hyperlink, où tu voudras, qui appellera la fonction cacher(), servant évidemment à mettre un display:none; sur ton <ul> :
Et voilà !!! :-D
Dis-moi comment tout ça évolue !
Petite correction amicale avant de commencer : Ce n'est pas du Java, c'est du Javascript. Je ne vais pas dans le détail, mais si tu veux regarde sur Wiki, y a une énorme différence. Just so you know ;-)
Ton code est correct, appart deux petite fautes d'orthographe :
1. Ce n'est pas onmouse="affiche();" mais onmouseup="affiche();" ;
2. Ce n'est pas fonction affiche() { mais function affiche() { (Eh oui, que veux-tu, l'anglais, toujours l'anglais !!!)
Appart ça, pour afficher/cacher des éléments, le plus facile est de faire une fusion de Javascript et de CSS. En CSS, tu as l'attribut display qui peut être mis à block, inline, inline-block, none, etc.
Référence rapide ici pour CSS : display
Donc pour changer le display d'un élément via Javascript, il faut d'abord que l'élément cible (un <ul>, dans ton cas) soit identifié par un ID. Rien de plus simple :
<ul id="id_quelconque">...</ul>
Ensuite, tu vas aller "chercher" cet ID avec Javascript dans ta fonction affiche(), et tu vas définir son style de manière à ce que ce soit visible :
function affiche() {
document.getElementById("id_quelconque").style.display = "block";
}
Et ensuite tu n'auras plus qu'à faire un autre bouton ou hyperlink, où tu voudras, qui appellera la fonction cacher(), servant évidemment à mettre un display:none; sur ton <ul> :
function cacher() {
document.getElementById("id_quelconque").style.display = "none";
}
Et voilà !!! :-D
Dis-moi comment tout ça évolue !
