Changer de page sans chargement
Voila mon problème, Depuis quelques jours, j'essai de créer des pages web avec 3 divs:
_en tete
_menu
-contenu
Comme mon en tete et mon menu sont toujours les meme, ce n'est pas la peine que je les refasse pour chaque page. J'essaye donc de trouver une solution qui puisse me permettre de ne modifier que le contenu en cliquant sur un lien du menu.
Il existe plusieures solutions:
_Les frames mais cette solution est a proscrire car elle n'est pas acceptée par les normes du W3C.
_AJAX qui à l'air d'être une bonne technique mais j'ai essayer de suivre des tutoriaux expliquant comment sa marche mais il y'a trop de variable que je ne comprend pas. Je n'arrive pas à comprendre et donc je suis tout a fait incapable de m'en servir.
J'ai donc eu une idée ce matin mais je ne suis pâs sur que sa puisse marcher et je ne trouve pas le code approprié. Voici ce à quoi j'ai pensé:
Je pourrais créer une page unique avec mon en tete, mon menu, et le contenu de toutes les pages que je voulais créer. Ensuite il me suffirai d'en afficher une au chargement de la page et de rendre les autres invisible.
Puis lors du click sur un lien, une fonction javascript permettrait de rendre invisible le div actuel puis de rendre visible le div correspondant au lien.
Il faut savoir que j'ai plus de connaissance sur le visual basic et que j'ai la facheuse tendance de tenter de reproduire, ce que je sais faire en VB, en langage web.
J'ai vu que l'on pouvait rendre invisible des div en javascript en utilisant le "display="none";
J'ai donc tenté ceci:
code d'un lien du menu (html)
Code:
1
2
|
<a title="link towards overview" href="#" onclick="invisible()">Project overview</a> |
Le div à rendre invisible a pour id: id="main".
et voici mon code javascript:
Code:
1
2
3
4
5
|
invisible()
{
main.style.display="none";
} |
main étant l'id du div et .style.display="none", le code grâce auquel je pensais parvenir à rendre invisible le div.
Sinon je me demandais si ce n'était pas possible avec du css?
Grâce au css j'avais remarqué que l'on pouvait faire disparaitre des éléments lorsque l'on passe dessus:
Code:
1
2
3
4
5
|
a:hover
{
display: none;
} |
Le problème est que dés que l'élément est rendu invisible, le css ne considère plus que la souris est dessus, par conséquent, il le fait réapparaitre; puis redisparaitre puisque dés sa réapparition la souris fait a nouveau effet de hover.
Remarque, cela fait un joli effet de clignottement extra rapide pour les amateurs d'animation facile^^.
Mais c'est pas tout a fait ce que je recherche.
Quelqu'un aurait une solution à me proposer à partir de l'une de ses méthodes? Ou bien est ce que je fait vraiment fausse route et que mes idées sont plus farfelues les unes que les autres?^^.
PS: Oui quand je m'y met faut être motivé pour arrivé a lire l'ensemble de mon message.
