LAYER dinamico?

**MM88** · 30-04-2006, 11:35

Ciao ragazzi, ho una pagina html che presenta un elenco di persone, ognuna visualizzata con foto e nome, dentro dei div.
In che modo posso fare per mettere un layer o un div trasparente che permetta - cliccando sulla foto - che appaiano dinamicamente altre informazioni, tipo età, descrizione e altro?

Come posso rendere ogni foto un btn che - una volta cliccato - visualizzi dinamicamente altre informazioni? Postate il codice, gentilmente.

grazie.

**fcaldera** · 30-04-2006, 13:46

copia e incolla l'esempio

il funzionamento del codice javascript dipende dalla struttura del markup html, quindi se lo cambi il javascript potrebbe non funzionare. per comodità ho formattato il tutto con un pò di css.

codice:

<html>
<head>
  <style type="text/css">
   .persona {
      width  : 400px;
      border : 1px #c00 solid;
      overflow : hidden;
   }
   
   .persona img {
      width  : 120px;
      height : 100px;
      float  : left;
   }
   
   a img { border : 0; }
   
   .persona h2 {
        margin  : 0;
   }
   
   .persona p {
        margin  : 5px;
        width   : 260px;
        float   : right;
        display : inline;
   }
   
   .details {
        display : none;
   }
  </style>
  
  <script type="text/javascript">
  function showDetails(p) {
     person_div = p.parentNode;
     details_div = person_div.getElementsByTagName('div')[0];
     details_div.style.display = (details_div.style.display == 'block')? 'none' : 'block' ;
  }
  </script>
</head>

<body>

<div class="persona">
   <a href="#" onclick="showDetails(this); return false;" alt="Nome Cognome" title="Nome Cognome">
   [img]foto.jpg[/img]</a>
   <h2>Persona 1</h2>
   


        Bla bla bla bla bla bla bla bla bla bla bla bla bla
        bla bla bla bla bla bla bla bla bla bla bla bla bla
   </p>
   <div class="details">
        


        Altro bla bla bla
        </p>
   </div>  
</div>

<div class="persona">
   <a href="#" onclick="showDetails(this); return false;" alt="Nome Cognome" title="Nome Cognome">
   [img]foto.jpg[/img]</a>
   <h2>Persona 2</h2>
   


        Bla bla bla bla bla bla bla bla bla bla bla bla bla
        bla bla bla bla bla bla bla bla bla bla bla bla bla
   </p>
   <div class="details">
        


        Altro bla bla bla
        </p>
   </div>
   
</div>

</body>
</html>

Ciao
-Fab-

**MM88** · 30-04-2006, 20:27

sei gentilissimo, lo provo.

grazie.

Discussione: LAYER dinamico?

Strumenti discussione

Ricerca discussione

Visualizza

LAYER dinamico?

Permessi di invio