Div "inversé"

Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention - 19 nov. 2010 à 15:03

Bonjour,
le titre n'est pas très parlant, je vais vous expliquez ce que je recherche.

En fait j'ai une zone dans mon site que je voudrais faire ressortir.
En gros quand on clique sur un lien, tout cette zone reste "normal" et tout le reste devient noir clair.

l'idéal pour faire cela serais d'utiliser du JS avec des DISPLAY:NONE.
Le problème c'est que je ne vois pas trop comment faire, j'ai pensé à un genre de DIV "inversé" où la div serais en fait tout ce qui n'est pas la DIV mais ça doit pas exister ...

Sinon j'ai penser créer 4 DIV en position ABSOLUTE, une au haut, une en bas, une à droite et une à gauche en mode FLOAT:LEFT, affin de ne laisser afficher que la partie visible mais j'ai un peut peur que ça soit pas toujours cadré.

je demande donc votre avis sur la question.
merci :)

Afficher la suite

A voir également:

2 réponses

Réponse 1 / 2

coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention 119

Ça va plus ou moins répondre à ta question, mais est-ce que ça pourrait être envisageable de mettre des bordures larges de 50px de tous les côtés de ta div à faire ressortir ? Tu la mets ensuite en position relative ou absolute et avec un z-index de 10 ou plus, et il ne te reste qu'à la positionner sur ta page ! Par-contre ça ne cachera pas TOUT le reste de la page, mais si c'est un compromis acceptable, ce serait une petite solution bien facile...

Sinon, le plus simple selon moi serait de faire deux <div> : celle que tu veux faire ressortir, plus une autre qui prend les dimensions de la page (height et width à 100%), et qui est totalement noire. Tu mets la div noire à z-index:5; et ta div de contenu à z-index:10;
et quand tu cliques sur le lien, les deux divs s'affichent ! Le z-index s'assure que ton contenu est par-dessus le noir. Tu n'as plus qu'à prévoir un bouton pour remettre ces deux div en display:none; quand tu as fini avec.

Dis-moi ce que tu en penses ! ;)

Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention 372

ok merci pour ta réponse, j'ai essayé mais le problème c'est que si je mes mon DIV contenu en position absoute, c'est décalé, conflit avec les backgroud et décalage au zoom.
je sais pas si c'est parce que ma structure est pas très clean mais ça me fait sauvant ça avec les positon:absolute.

coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention 119

Oui les position:absolute ne sont pas faits pour une grande flexibilité, malheureusement :(
vas-y plutôt en position:relative. C'est presque la même chose que le position:static, qui est le défaut pour la plupart des éléments.
Qu'est-ce que tu veux faire avec ton div de contenu ? le centrer sur la page ? Si c'est le cas tu peux le faire avec des margin:0 auto; ou quelque chose dans le genre... Commence déjà par le mettre en position relative, on verra ensuite en fonction de tes besoins...

Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention 372

ça fonctionne nickel comme tu m'as dis ^^ merci bcps.
Non pas besoin que le contenu soit centrer, juste mis en valeur ^^

J'ai juste une petite question au cas où tu serais comment faire.
Voila je voulais savoir si quand on clique sur le lien, et que le DIV noir aparait, s'il y avais moyen de faire apparaître se fond progressivement, en fondu, moins "brut"

Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention 372

j'ai trouvé

  

<script type="text/javascript">
<!--
var opacite = 0;
function montreDiv()
{
  var obj = document.getElementById("noir");
  opacite++;
  
  if (obj.style.filter) // IE
  {
    obj.style.filter = "alpha(opacity=" + opacite + ")";
  }
  else
  {
    if (obj.style.MozOpacity) //FF
    {
      obj.style.MozOpacity = opacite/100;
    }
    else
    {
      if (obj.style.opacity)  // FF et Opera (?)
      {
        obj.style.opacity = opacite/100;
      }
      else
      {
        if (obj.style.KhtmlOpacity) //Konqueror (Linux), Safari(MacOS)
        {
          obj.style.KhtmlOpacity = opacite/100;
        }
      }
    }
  }
  
  if (opacite<100)
    setTimeout("montreDiv()","20");
}
//-->
</script>

<input type="button" value="cliquez ici" onclick="montreDiv()"/>  
   
<div style="border: 3px ridge #555555; width: 300px; height: 300px; background-color:#555555; -moz-opacity: 0; filter: alpha(opacity=0); opacity:0" id="mondiv">   
</div>

ça fonctionne par contre j'ai du mal a le configurer, par exemple pour qu'a la fin, l'opacité ne soit que de 0.9 (un noir un peu transparent)
Et aussi comment le faire dans l'autre sens (quand je ferme le div)

Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention 372

Ha si c'est comme le php, peut etre que opacite++ est un racourci de opacité=1 donc faut peut être changer ça ?

Réponse 2 / 2

pitxu Messages postés 689 Date d'inscription Statut Membre Dernière intervention 95

bonjour,

tu peux utiliser onClick sur la balise div :

<div id="divID1" onclick="document.getElementById('divID1').style=display:block">
</div>

<div id="divID2" onclick="document.getElementById('divID1').style=display:none">
</div>

à tester ...

coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention 119

Si tu utilises cette option, est-ce que le code ne serait pas plutôt :

<div id="divID1" onclick="document.getElementById('divID1').style.display='block';">
</div>

?

Juste être sûr ! ;-)

pitxu Messages postés 689 Date d'inscription Statut Membre Dernière intervention 95

oui exact :o

Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention 372

Merci pitxu, je pense que ce que tu me proposé était du même genre que coeus donc j'ai suivis vos conseil et ça fonctionne.

Div "inversé"

2 réponses

Votre réponse

Discussions similaires