Slideshow di brevi testi con link differenti

**Gas75** · 13-03-2009, 01:24

Salve, avrei bisogno di un effetto simile a questo
http://gas75.interfree.it/banner_sotto.htm
(consideratelo inserito in un frame 750x30 in modo che appaia una riga per volta), solo che i testi non dovrebbero scorrere verso l'alto ma sostituirsi come uno slideshow (con una transizione o meno, non importa), contenendo ciascuno un link differente...

Potete suggerirmi qualcosa?
Grazie.

**Straystudios** · 14-03-2009, 01:21

Ho scarabocchiato questo per conciliare il sonno; spero ti torni utile e gradito.

Tre semplici DIV (ma puoi aggiungerne altri) sono in partenza a display: none; e i contenuti non appaiono.
La funzione ne muta uno alla volta a display="block" seguendo la variabile t che da zero, assume valori crescenti 0 1 2 con t++; e l' if-statement che la riporta a 0 per ricominciare.
Ma per prima cosa, la funzione resetta tutti i DIV a "none" (nascosti), con l' esecuzione del for; così facendo, richiude quello aperto precedentemente.

codice:

<html>
<head><title>rotating contents</title>

<script type="text/javascript" language="javascript">
<!--

 var t = 0;

function turn() {
   group = document.getElementById("box");
   single= group.getElementsByTagName("div");
     for(x=0; x<single.length; x++){
         single[x].style.display="none";
     }
   single[t].style.display="";
   t++;
     if(t==single.length){t=0};
   setTimeout('turn()', 4000);
   
 }

//-->
</script>

</head>
<body bgcolor="#004000" text="#E3E3E3" onload='turn();'>
<h1>Straystudio</h1>

<div id="box" style="width: 750px; height: 30px; border: thick solid white;">

 <div style="display: none; height: 30px; background-color: #A0A000; color: #0000FF; padding-left: 8px; font-family: Arial, sans-serif;">
   CONTENUTO 1 
 </div>
 <div style="display: none; height: 30px; background-color: #A3A; color: #FFF; text-align: center; font-family: Times New Roman;">
   CONTENUTO 2 | Vai al thread
 </div>
 <div style="display: none; height: 30px; background-color: aqua; color: red; padding-left: 8px; font-family: Impact, sans-serif;">
   CONTENUTO 3
 </div>

</div>


</body>
</html>

4000 significa 4 secondi in setTimeout('turn()', 4000); che puoi modificare per la cadenza che vuoi.
Si può anche scrivere setTimeout('turn()', speed); e in alto allo script dichiarare anche la variabile
var speed = 4000;
questa forma è utile specialmente in script vasti, per evitare di dover andare ad editare tra le righe.

Si possono aggiungere onMouseOver e onMouseOut al DIV ID="Box" per fermare e poi far ripartire il timer.

**Gas75** · 14-03-2009, 11:12

Grazie mille, lo provo in questi giorni.

**Gas75** · 15-03-2009, 16:15

Il codice funziona a meraviglia...

L'unica cosa fuori posto è che non riesco a centrare verticalmente i testi (che devono andare su una o due righe)

, restano sempre allineati in alto.

**Straystudios** · 15-03-2009, 21:12

Ora questa sarà materia di HTML, con o senza CSS, di come la tua pagina è strutturata; materia che il mio esempio non aveva pretese di contemplare.

Il criterio più idoneo a mio avviso, sarebbe di utilizzare le "vecchie" TABLE stando all' HTML 4.0 Transitional che forniscono un bel Attributo valign="middle" per le celle TD che è fenomenale.
E quindi sostituirai div con table nella seguente riga del JS:

single= group.getElementsByTagName("table");

(ometto font e colori eventuali, per concisione):

codice:

<div id="box" 
  style="width: 750px; height: 30px; border: thick solid white; padding-left: 8px;">

<table height="30" cellpadding="0" cellspacing="0" width="100%">
 <td bgcolor="" align="left" valign="middle">
   CONTENUTO 1 
 </td>
</table>

<table height="30" cellpadding="0" cellspacing="0" width="100%">
 <td bgcolor="" align="center" valign="middle">
   CONTENUTO 2 
 </td>
</table>

</div>

Ma se ti trovi a seguire la moda del table-less layout (progetto senza tabelle) in XHTML 1.0 Strict, allora:

(1ª complicanza) ottenere la centratura verticale di un contenuto dinamico impiegando i soli DIV e CSS2 è cosa molto macchinosa e presume una buona conoscenza di CSS2 e del problema specifico.

Si può rimediare assegnando ai DIV un PADDING-TOP: 6px; nello STYLE e dichiarando un FONT-FAMILY comune ai maggiori Browser e SS.OO., e con appropriato FONT-SIZE; cosi gestendo il contenuto come fixed-sized e non più dynamic.

Rimanendo alle TABLE, il !DOCTYPE XHTML 1.0 Strict non ammetterebbe (agli effetti della validazione) l' HEIGHT come Attributo tradizionale dato all TABLE HEIGHT="30" e gli andrebbe assegnato con lo STYLE
table style="height: 30px;"
Per i Browser tuttavia, è indifferente.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>


<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

**Gas75** · 15-03-2009, 22:05

Scusami se ho "deviato" dal problema iniziale, ma generalmente risolvo l'allineamento verticale proprio come hai scritto tu, basandomi su tabelle; non m'era mai capitato di doverci fare ricorso in un campo <div>, e visto che consente l'allineamento orizzontale, credevo esistesse un semplice tag per quello verticale...

Con le tabelle, devo crearne una per ciascuna "slide di testo" che voglio mettere in rotazione con lo script?

Questo script dev'essere inserito (necessariamente! non ho alternative) in un iframe di una tabella nel frontespizio di un forum. Per cui la pagina (in HTML, con questa intestazione: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) sarà ospitata in un mio spazio web, e nel codice del forum la richiamo nell'iframe... In pratica mi serve mettere in rotazione dinamica alcuni link verso le discussioni più importanti del forum.
Il CSS lo uso appunto in questa pagina nel mio spazio web, senza problemi: ci definisco il font Verdana, dimensioni, colori, e sottolineatura solo al passaggio del mouse...

**Gas75** · 06-05-2009, 16:03

Torno su questa discussione poiché alla fine ho utilizzato lo script fornito su una pagina differente da quella prevista.
Il problemino è che, nel caricamento della pagina, per alcuni secondi (da un paio a svariate imbarazzanti decine, anche con connessione 7 mega) mi si visualizza l'intero testo sovrapposto alla grafica del resto della pagina, come se lo script non partisse con la rotazione delle tabelle ma le mostrasse una sotto l'altra.

Non ho fatto più ricorso ad iframe poiché i testi di questo slideshow intendono essere anche chiavi di ricerca per trovare il sito: in sostanza descrivono i contenuti del sito, e quindi per sfruttarli credo sia giusto tenerli come testo visibile nel codice del file index...

**Gas75** · 17-05-2009, 11:37

Nessuno è in grado di aiutarmi??

Originariamente inviato da Gas75
Il problemino è che, nel caricamento della pagina, per alcuni secondi (da un paio a svariate imbarazzanti decine, anche con connessione 7 mega) mi si visualizza l'intero testo sovrapposto alla grafica del resto della pagina, come se lo script non partisse con la rotazione delle tabelle ma le mostrasse una sotto l'altra.

**Gas75** · 30-05-2009, 16:05

Niente?

**cavicchiandrea** · 30-05-2009, 16:31

Prova a postare il link alla pagina, potrebbe aiutare a trovare una soluzione.

Discussione: Slideshow di brevi testi con link differenti

Strumenti discussione

Ricerca discussione

Visualizza

Slideshow di brevi testi con link differenti

display="none"; display="block"; (o) display="";

Permessi di invio