Tabella Slideshow effetto Fade

<!--Tabella slide By Pivets-->
<!-- -->
<!--NON MODIFICARE-->
<script type="text/javascript">
numerotab = 5;
function provafade(selezionata) {
for(i=1; i<= numerotab; i++) {
if (i == selezionata) {
document.getElementById('tabb' + selezionata).style.opacity="1";
document.getElementById('tabb' + selezionata).style.zIndex="2";
document.getElementById('link' + selezionata).style.background="#292929";
document.getElementById('link' + selezionata).style.padding="8px 9px";}
else {document.getElementById('tabb' + i).style.opacity="0"; document.getElementById('tabb' + i).style.zIndex="1";
document.getElementById('link' + i).style.background="#3b3b3b";
document.getElementById('link' + i).style.padding="6px 7px";};
}} </script>
<!--FINE -->

<!-- Inizio tabella slide-->
<div id="provafades">
<table cellspacing="0" cellpadding="0">
<div class="tabtop">

<!--Link pannelli-->
<a id="link1" href="javascript:void(0)" onclick="provafade(1)">Link 1</a>
<a id="link2" href="javascript:void(0)" onclick="provafade(2)">Link 2</a>
<a id="link3" href="javascript:void(0)" onclick="provafade(3)">Link 3</a>
<a id="link4" href="javascript:void(0)" onclick="provafade(4)">Link 4</a>
<a id="link5" href="javascript:void(0)" onclick="provafade(5)">Link 5</a>
<!--Aggiungere la stringa o le stringhe per i link ai pannelli qui sotto-->

<!--Da qui in giù non aggiungere più stringhe per i link ai pannelli-->
</div>

<div class="container">
<ul id="gruppab">

<!--Pannello 1-->
<li id="tabb1"><div><p>
Prova testo 1
</p></div></li>

<!--Pannello 2-->
<li id="tabb2"><div><p>
Prova testo 2
</p></div></li>

<!--Pannello 3-->
<li id="tabb3"><div><p>
Prova testo 3
</p></div></li>

<!--Pannello 4-->
<li id="tabb4"><div><p>
Prova testo 4
</p></div></li>

<!--Pannello 5-->
<li id="tabb5"><div><p>
Prova testo 5
</p></div></li>

</ul>
<div id="credi">© <a href="https://graficarulez.forumfree.it/?t=77420109">Credits</a></div>
</div>
</table>
</div><br><br>
<!--Fine tabella slide-->

<!--INIZIO CODICE TABELLA SLIDE -->
<script type="text/javascript">document["getElement"+"ById"]('provafades').style.width = document["getElements"+"ByClassName"]('board')[0].offsetWidth+'px'; </script>
<!--FINE CODICE TABELLA -->

/*--Tabella slide By Pivets--*/

/*Modificare il valore in px di height per variare l'altezza*/
/*se si vuole modificare il colore di sfondo della tabella, modificare il colore esadecimale di background(es. background: #xxxxxx)*/
#provafades {height: 300px; background: #3B3B3B;
margin-bottom: 20px}

/*se si modifica il valore height di #provafades, cambiare il valore anche a questo height(altezza), sottraendo 10px all'altezza data all'height di #provafades*/
/*se si vuole modificare il colore di sfondo delle slide, modificare il colore esadecimale di background(es. background: #xxxxxx)*/
#provafades #gruppab li {height: 290px; background: #252525;
position: absolute; left: 0; bottom: 0; width: 100%}

/*se si modifica il valore height di #provafades, cambiare il valore anche a questo height(altezza), sottraendo 10px all'altezza data all'height di #provafades*/
/*se si vuole modificare il colore di sfondo del container, modificare il colore esadecimale di background(es. background: #xxxxxx)*/
#provafades .container {height: 290px; background: #252525;
width: 100%; margin-top: -3px !important; border: 0; border-radius: 0; box-shadow: none; padding: 0}

/*se si modifica il valore height di #provafades, cambiare il valore anche a questo height(altezza), sottraendo 30px all'altezza data all'height di #provafades*/
/*se si vuole cambiare il colore delle scritte nelle slide modificare il colore esadecimale di color(es. color: #xxxxxx)*/
#gruppab li div {color: #F4F4F4; text-align: left; height: 270px;
margin: 10px; overflow: auto}

/*se si vuole cambiare il colore del background nello sfondo del contenitore dei link dei pannelli, modificare il colore esadecimale di background(es. background: #xxxxxx)*/
#provafades .tabtop {background: #3B3B3B;
width: auto; height: auto}

/*se si vuole cambiare il colore del background nello sfondo dei link dei pannelli, modificare il colore esadecimale di background(es. background: #xxxxxx)*/
/*se si vuole cambiare il colore nei link dei pannelli, modificare il colore esadecimale di color(es. color: #xxxxxx)*/
#provafades .tabtop a, #provafades .tabtop a:visited, #provafades .tabtop a:link {background: #3B3B3B; color: #FFF;
position: relative; top: 5px; font: 10px arial; text-transform: uppercase; text-align: center; text-decoration: none; padding: 6px 7px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out}

/*se si vuole cambiare il colore del background nello sfondo dei link dei pannelli(quando il mouse è sopra), modificare il colore esadecimale di background(es. background: #xxxxxx)*/
/*se si vuole cambiare il colore delle scritte nei link dei pannelli(quando il mouse è sopra), modificare il colore esadecimale di color(es. color: #xxxxxx)*/
#provafades .tabtop a:hover, #provafades .tabtop a:visited:hover, #provafades .tabtop a:link:hover {background: #3B3B3B; color: #FFF;
font: 13px arial; text-transform: uppercase; text-align: center; text-decoration: none; padding: 6px 35px !important; margin: 0 -5px 0 -5px}
#provafades .tabtop a:hover {background: #292929 !important}


/*NON MODIFICARE*/
#provafades table {display: block}
#gruppab > * {opacity: 0;
z-index: 1;
display: inline-block;
list-style-type: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out}
#gruppab > *:first-child {opacity: 1; z-index: 2}
#gruppab li div img {padding: 5px}
#credi {padding: 3px 5px; font: 10px arial; text-transform: uppercase; background-color: #161616; color: #F4F4F4; position: absolute; right: 0; bottom: 0; margin-bottom: -18px}
#credi a {color: #FFFFFF !important}

/*FINE DEGLI STILI TABELLA SLIDE*/