Comment masquer un tableau en laissant une cellule non masquée ?

Bonjour

Voici la petite difficulté que j'aimerais pouvoir résoudre :

Note rajoutée le 31/07 à 11 h 30 : La question posée peut aussi concerner un autre besoin : quand on clique sur une cellule d'un tableau, comment faire pour masquer les autres cellules du tableau derrière un voile semi-transparent, la cellule sélectionnée restant en affichage normal ?

J'ai un tableau html dont une cellule doit servir de cadre à une page html.
J'ai donc marqué la cellule par un iframe :

<td><iframe name="Cadre"></iframe></td>

A la suite du tableau, j'affiche un voile semi-transparent qui masque l'ensemble du tableau et place le contenu de la page html appelée dans la cellule Cadre.

<script type="text/javascript">
document.getElementById('Voile').style.display='block';
parent.window.Cadre.location='Page html appelée';
</script>

Je n'arrive pas à obtenir que la cellule Cadre soit au premier plan.

J'ai notamment essayé les actions suivantes :

Définir la cellule avec un z-index supérieur à celui du voile (z-index du voile : 10) :

<td style="z-index:20;">

Définir l'iframe avec un z-index supérieur à celui du voile :

<iframe name="Cadre" style="z-index:20;">

Encadrer l'iframe par un div

<td><div name="Div_Cadre"><iframe name="Cadre"></iframe></div></td>

et définir le zIndex du div à 20 :

<script type="text/javascript">
document.getElementById('Voile').style.display='block';
parent.window.Cadre.location='Page html appelée';

Div_Cadre.style.zIndex=20;

</script>

Même opération que ci-dessus, mais en encadrant la cellule par le div :

<div name="Div_Cadre"><td><iframe name="Cadre"></iframe></td></div>

La cellule Cadre se trouve toujours sous le voile et non au premier plan.

Est-ce que quelqu'un parmi vous saurait me proposer une piste ?

Merci d'avance.
Modifié par cadbor (02 Aug 2009 - 22:03)

Bonjour,

Encadrer l'iframe par un div

<td><div name="Div_Cadre"><iframe name="Cadre"></iframe></div></td>[/quote]

Si tu palces ta div Div_Cadre en "position: relative;", ça donne quoi ?

Bonjour Sylvain

Merci de ta réponse.

J'avais effectivement essayé cette éventualité, mais sans succès.

Comprenant ensuite qu'un flux déjà effectué ne peut être modifié a posteriori — est-ce bien cela ? —, j'ai réalisé qu'il fallait procéder par flux successifs.

Après quelques tâtonnements, j'ai pu élaborer la solution suivante :

Dans le div principal "Conteneur"

position: relative; display:block; z-index=5

je place le tableau avec toutes ses cellules remplies sauf la cellule devant s'afficher au premier qui est est déclarée comme étant vide :

<td width="xxx" height="xxx"></td>

Dans le div "Conteneur", je place un div "Voile"

position:absolute; display:none; z-index:10; opacity:0.6; filter: alpha(opacity=60);

se superposant au tableau principal et ayant la même taille que celui-ci.


Toujours dans le div "Conteneur", je place un div "Conteneur2"

position:absolute; display:none, z-index=15;

contenant un tableau recopiant le tableau principal dans lequel toutes les cellules sont dimensionnées à l'identique et vides, sauf la cellule devant être affichée en premier plan. A celle-ci j'affecte un iframe "Cellule_premier_plan".

Enfin, toujours dans le div "Conteneur", j'inscris le script suivant :

<script type="text/javascript">
document.getElementById('Voile').style.display='block';
document.getElementById('Conteneur2').style.display='block';
parent.window.Cellule_premier_plan.location='page html devant être affiché dans la cellule';
</script>

La page affichée dans la cellule contient des liens permettant de sortir du voile (tous les liens sous le voile sont bien évidemment inaccessibles).



Cette solution peut être appliquée au besoin que je mentionnais dans ma note introductive, à savoir la possibilité de voiler le reste du tableau lorsqu'on clique sur une cellule :

Il faut créer autant de tableaux vides (exceptée la cellule qui doit être affichée au premier plan) que de cellules cliquables.
Chacune des cellules vides cliquables doit contenir le lien vers le tableau vide qui lui correspond. (Sans cela, une fois une cellule cliquée, les autres cellules ne seraient pas accessibles.)
Un clic sur un cellule affiche le voile, puis le tableau vide correspondant à la cellule.

Cette solution est sans doute un peu fastidieuse et demande une attention soutenue. Si toutefois vous voyez une solution plus élégante, je suis preneur.

Bonne journée
Modifié par cadbor (02 Aug 2009 - 14:06)