Edit : Div, changer la visibilité avec display

[Wookis]

Bonjour, j’ai un petit soucis, j'ai la structure du site que je veux réaliser mais je cherche a afficher une grande partie de texte sur le passage des différentes composantes du menu.Cela marche bien avec un affichage simple de texte, avec une fonction basique en javascript :

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
function affiche(toThis)
  {
  if (document.getElementById)
    {
    document.getElementById("description").innerHTML = toThis;
    }
  else if (document.all)
    {
    document.all["description"].innerHTML = toThis;
    }
  }

et un appel

Code html :

<a href="#" onMouseOver="affiche(' Affichage du texte ')">Let's ride ! </a><br>

Ce que je cherche a faire c'est a remplacer le texte qui sert de variable par quelquechose qui afficherais plusieurs ligne de texte, avec peut etre des images ou une certaine mise en page et je pensais a une fonction PHP ? Je vais peut etre dire une bétise mais l’idée qui me vient creer des fichiers séparés selon les choix du menus qui contientrait le texte approprié, et a lorsqu'on survole le lien, on fait appel à un include ?

Un grand merci d'avance

[FirePrawn]

Bonjour,

J'ai pas très bien compris ton besoin. Tu veux afficher du texte sur plusieurs lignes au survol de ton lien c'est ça ?

[Wookis]

Envoyé par FirePrawn

Bonjour,

J'ai pas très bien compris ton besoin. Tu veux afficher du texte sur plusieurs lignes au survol de ton lien c'est ça ?

Oui c'est bien cela, avec la possibilité d'y inclure des images.
J'ai deux "div", l'un pour le menu, l'autre ou sera affiché le contenu souhaité.

[m4riachi]

Il faut de l'ajax pour réaliser ton idée.
Ou mettre ton contenu dans des div hidden et a la survole tu affiche et tu cache comme ça tu aura pas besoin des appels ajax.

[FirePrawn]

J'aurais plus dit comme m4riachi aussi. Tu gardes ta fonction onMouseOver simplement cette fonction mets le div dans lequel tu as ton contenu en affichage. Il faut jouer avec les display pour ça

[Wookis]

L'utilisation des div-hidden pose problème, je devrais avoir a peu près 7 choix de menu donc 7 bloc différents, changer la visibilité les effaces juste a l'écran, mais la place occupée est toujours la.

J'ai vu par contre la possiblité d'utiliser display:none, mais ca fera quand meme une page pas mal chargée, que ce soit en php ou en java, n'est-il pas mieux de faire une fonction qui appelle un fichier où est écrit le bloc désiré ?

[Wookis]

Envoyé par FirePrawn

J'aurais plus dit comme m4riachi aussi. Tu gardes ta fonction onMouseOver simplement cette fonction mets le div dans lequel tu as ton contenu en affichage. Il faut jouer avec les display pour ça

Je vais essayer ca, voir ce que ca donne, merci a vous deux

[Wookis]

N.B: Je continue a programmer en JS du coup je suis plus dans le bon forum, mais juste pour ce petit soucis je vais pas créer un autre topic, je le ferais après si besoin.

Je suis pas habitué au javascript, et avec une fonction du type

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
function afficher(id)
{
	if (document.getElementById)
    {
		document.getElementById(id).style.display='block';
    }
	else if (document.all)
    {
		document.all["id"].style.display='block';
    }    
}

et un appel avec des div T1, T2..

Code html :

<a href="#" onMouseOver="afficher('T1')">Afficher T1</a><br>

Ca ne marche pas, je pensais reprendre la meme syntaxe en changeant ce qu'il fallait mais..

Edit: Désolé Bovino, suis un peu fatigué

[Bovino]

Code :

document.getElementById("id").style.display='block';

Là, tu recherches l'élément dont l'id est "id" et non celui passé en paramètre

Code :

document.getElementById(id).style.display='block';

Sinon

Code :

else if (document.all)

Tu devrais mettre en place des stats, juste pour voir combien de fois tu passes dans cette condition...

[Wookis]

Quoi qu'il en soit réussi, j'avais pas que ca comme petite erreur de syntaxe, merci bcp

[Loceka]

Ouaip, si jamais la fonction getElementById n'existait pas pour document dans certains navigateurs, je crois que la quasi totalité des scripts existants seraient à revoir.

En d'autres termes : inutile de faire ton test d'existence de cette fonction, ça perd du temps à l'écrire et c'est tout.

[Bovino]

Envoyé par Loceka

Ouaip, si jamais la fonction getElementById n'existait pas pour document dans certains navigateurs, je crois que la quasi totalité des scripts existants seraient à revoir.

Et pourtant... IE3 n'implémente pas getElementById !

[Wookis]

Envoyé par Loceka

Ouaip, si jamais la fonction getElementById n'existait pas pour document dans certains navigateurs, je crois que la quasi totalité des scripts existants seraient à revoir.

En d'autres termes : inutile de faire ton test d'existence de cette fonction, ça perd du temps à l'écrire et c'est tout.

Oki doki

Edit: Cette méthode amène un autre petit problème, la ou avec l'affichage d'une ligne une ligne en remplaçait un autre, la les blocs restent et s'affichent donc les uns en dessous des autres, comment redéfinir le div qui s'est affiché précédemment ? Je vais chercher un peu, mais une idée serais de remettre tout les div contenu père a none, c'est possible ?

[Loceka]

Envoyé par Bovino

Et pourtant... IE3 n'implémente pas getElementById !

Flûte ! Va falloir que je refonde mes scripts !

[Wookis]

Pour que seul le Div souhaité s'affiche, et donc qu'ils ne se surpepose pas les uns les autres un fois affiché, je pensais rajouter une boucle qui avant de mettre la selection visible, les mettais tous en cachés, du type

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function afficher(id)
{
        for(i=1;i<5,i++)
	{
		temp="T"+i;
		if (document.getElementById)
		{
		document.getElementById(temp).style.display='none';
		}
	}
	if (document.getElementById)
        {
		document.getElementById(id).style.display='block';
         }
}

Je suis en phase de test, mes div s'appellent simplement T1 à T4, mais ca ne marche pas, cela n'affiche plus rien du tout au survol.Une petite indication ?

P.S : Est-ce que le test "if (document.getElementById)" est toujours nécessaire lorsqu'on touche a une propiete ou si on rajoute du texte avec innerHTML ?

[Bovino]

Code :

if (document.getElementById)

ce test ne sert à rien ! Supprime-le (et oublie-le à jamais) !

Sinon, il n'y a pas particulièrement de raison que ça ne fonctionne pas, si tant est que le paramètre id est bien renseigné...

[Wookis]

Ca ne marche pas, lorsque la fonction est :

Code :

1
2
3
4
function afficher(id)
{
		document.getElementById(id).style.display='block';
}

Cela affiche bien au survol, mais l'élément reste en place et le suivant s'affiche en dessous.

Mais en rajoutant juste la boucle for avant:

Code :

1
2
3
4
5
6
7
8
9
10
function afficher(id)
{
	var temp;
	for(var i=1;i<5;i++) [ J'avais mis une "," au lieu d'un ";" .. ]
	{
		temp="T"+i;
		document.getElementById(temp).style.display='none';
	}
		document.getElementById(id).style.display='block';
}

Cela n'affiche plus rien du tout, ca bloque a cause de la boucle non ? une erreur de syntaxe avec le temp ?

[Bovino]

Tu es sûr que tu as bien 4 div dont les id sont respectivement "T1", "T2", "T3" et "T4" ?
Tu pourrais montrer la partie HTML correspondante ?

[Wookis]

Ca marche finalement bien avec

Code :

1
2
3
4
5
6
7
8
9
10
function afficher(id)
{
		var temp;
		for(var i=1;i<5;i++)
		{
			temp="T"+i;
			document.getElementById(temp).style.display='none';
		}
		document.getElementById(id).style.display='block';
}

Du a une erreur de frappe, désolé