come si ottiene questo semplice effetto?

[giohtm]

Buonasera a tutti.
Girando qua e là nel Web mi sono imbattuto in questo semplice ma accattivante effetto.
http://janpolverini.com/works.html
Non so se è un javascript.
Qualcuno sa darmi delucidazioni su come ottenerlo?
grazie :master:
gio

[artorius]

mmm, direi che è una questione di CSS e JS:

Allora metti di avere un DIV contenitore con 3 div che contengono le scritte da visualizzare. Nel primo c'è la parte sopra con l'immagine che copare scompare, nel secondo c'è la parte che rimane sempre visibile, nel terzo c'è la scritta che compare scompare

<div class="Item">
   <div class="Fader Up">
       [img]tua_img.jpg[/img]
   </div>
   <div class="Middle">
      IL TITOLO 
   </div>
   <div class="Fader Down">
      Testo vario: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</div> 

Come CSS, nulla di fantascientifico:

<style type="text/css">
   .Item{
      float: left;
      width: 150px;
   }
   .Up{
      text-align: center;
      background-color: silver;
   }
   .Down, .Up{
      filter: alpha(opactity=0);
      opacity: 0;
      -moz-opacity : 0;
   }   
</style> 

Per la parte JS, io uso di solito MooTools che è multibrowser

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<script type="text/javascript">
   window.addEvent('domready', function(){
      $$('.Item').each(function(item){
          item.addEvents({
             mouseenter : function(){
                this.getElements(".Fader").setStyle("opacity", 1);
             },
             mouseleave : function(){
                this.getElements(".Fader").setStyle("opacity", 0);
             }
          });
      });
   });
</script>

Così dovrebbe andare.

[giohtm]

Ti ringrazio molto.....
Proverò
gio

[lucavizzi]

Ha ragione artorius dicendo che è una questione di css e javascript.

Ti posto un esempio:

<style type="text/*css">
#mydiv{
visibility:hidden;
}
</style>

<div id="mydiv" onmouseover="mostra()" onmouseout="nascondi()">contenuti</div>

function mostra(){
    var miodiv=document.getElementById("mydiv");//questo è l'elemento su cui modificheremo il css con una sola e semplice riga di codice.
    miodiv.style.visibility="visible";
}

function nascondi(){
    var miodiv=document.getElementById("mydiv");
    miodiv.style.visibility="hidden";
}

Tieni presente che TUTTO IL CONTENUTO del div verrà nascosto, quindi se una parte deve restare visibile deve essere posta FUORI dal div con id 'mydiv'.

Alla stessa maniera puoi modificare qualunque attributo CSS

miodiv.style.fontColor="#ffffff" fa diventare il testo bianco
miodiv.style.borderColor="#333333" fa diventare il bordo grigio
ecc ecc

ti basta prendere l'elemento (che può essere un qualsiasi tag: div, a, table, ecc) per id con

document.getElementById("idImpostatoNelTag");