WebSite X5Help Center

 
Linda R.
Linda R.
User

Inserire rollover di + testi  it

Autore: Linda R.
Visite 1563, Followers 2, Condiviso 0  

Salve a tutti,

vorrei inserire all'interno della mia pagina un effetto rollover. Ho realizzato una gif animata di immagini a tempo che compaiono e mi piacerebbe poter inserire un testo che cambia in base alle immagini ma con l'effetto rollover il problema è che non si possono inserire dei testi a scorrimento che si susseguono. Le frasi che si inseriscono vengono inserite interamente ad effetto rollover. Qualcuno ha una soluzione? Grazie

Postato il
55 RISPOSTE
Linda R.
Linda R.
User
Autore

Sta volta la risposta la do io:

Basta inserire nell'oggetto html della pagina interessata il seguente codice:

<script type="text/javascript">
var TextIndex = 0;
frase = new Array();
frase[0] = "SOPHISTICATED, FRESH CUISINE";
frase[1] = "TESTO2";
frase[2] = "TESTO3";
frase[3] = "TESTO4";
TextIndex = Math.random()*(frase.length);
TextIndex = Math.floor(TextIndex);
function rotazione() {
if (TextIndex == frase.length) {TextIndex = 0;}
document.getElementById("ruotare").innerHTML = frase[TextIndex];
TextIndex++;
setTimeout("rotazione();",5000);
}
</script>
<div id="ruotare" style="align:center; height:100px; width:800px; border: solid 0px #003366; color:#ffffff; background-color: #trasparent; font-family:Raleway; font-weight:normal; font-size:40px; margin:0px auto; padding:8px;"></div>
<script type="text/javascript">rotazione();</script>

dove le frasi da ruotare vanno inserite al posto di TestoX. Lo stile del rettangolo è evidenziato di viola e può essere modificato per quanto riguarda la posizione (center), l'altezza (60px), la larghezza(400px), lo stile del bordo, il colore del testo (#003366), il colore di sfondo (#FFEAE9), il grassetto (font-weigh: bold), la dimensione dei caratteri (14px) il margine rispetto all'esterno (margin) e il margine interno (padding). Il valore 5000 è in millisecondi e rappresenta il tempo di permanenza di ciascun testo. Aumentando tale parametro la rotazione sarà più lenta.

Leggi di più
Postato il da Linda R.
Linda R.
Linda R.
User
Autore

Dunque in virtù di questo semplice script vorrei sapere se qualcuno di voi sa dirmi come poter dare un effetto di transizione al testo in entrata e in uscita, tipo di scorrimento.

Per quanto riguareda invece la gif inserita se in photoshop gli dò un effetto transizione qsto non compare ed accade che l'immagine risuklti solamente bianca. Di seguito vi posto il link del nuovo sito.

http://www.centroames.it/Data/Sites/1/VERAPLUS/

Leggi di più
Postato il da Linda R.
Giancarlo B.
Giancarlo B.
User

Scusa la Domanda, visto che hai la pro non puoi utilizzare quella che ti propone il programma ?

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Si posso utilizzare l'oggetto Animated Hedlines, ma non so come dargli i tempi di entrata...non me li fa modificare

Leggi di più
Postato il da Linda R.
Giancarlo B.
Giancarlo B.
User

Io NON posso verificare (ho la EVO) ma mi sembra che l'oggetto testo della PRO abbia il rollover a chedule... non so se questo ti può essere utile, ciao.

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Il rollover non funziona, in pratica fa scorrere solo il testo ma non ti fa entrare ed uscire delle frasi, se inserisci più frasi te le mostra tutte insieme.

Leggi di più
Postato il da Linda R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...!... GifAnim a parte, 1.24 MB, da evitare assolutamente...!...

... hai provato le opzioni dell'oggetto testo a schede che ti avevo già in altro topic indicato...?...

>>  Presentazione 

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autore

Kolasim buongiorno e buon anno, quando inserisco l'oggetto testo e in impostazioni x il Rollover, scelgo scorrimento a schede questo non funziona.

Leggi di più
Postato il da Linda R.
Linda R.
Linda R.
User
Autore

Ok ho provato la presentazione delle schede e va bene, grazie.

Leggi di più
Postato il da Linda R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... ciao, grazie, per il riscontro; non avendo il programma adesso so che l'opzione è valida...

... Buon Anno anche a te...

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autore

Qualcuno sa dirmi come mai l'effetto di transizione nell'esportazione delle gif come mai non funziona e si vede soltanto un'immagine bianca?

Leggi di più
Postato il da Linda R.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... le transizioni GIF devi realizzarle con il tuo programma di grafica...
... per come ti avevo anticipato, il GifAnim è improponibile...
... pensa che il tuo GIF con due sole immagini di bassa qualità pesa già 1.24 MB ...
... applicando le transizioni tra le due immagini  su 80 fotogrammi, verrebbe fuori un file di circa 6-8 MB ...
...!...troppi...!... ...si potrebbe paralizzare la pagina ospite...
.
... meglio sarebbe una semplice transizione in JavaScript con peso max di 100-200 KB (!!!); ...oppure se vuoi fare tutto in automatico, potresti farla con il programma in una pagina nascosta e senza applicare la grafica del sito, e poi usare il  solito Div_CUSTOM+IFRAME da usare come sfondo...

... per sfizio, ho voluto provare adesso col mio programma PSP una transizione luminosa sul tuo GIF, riducendolo di misure a 400x177 e di peso  a 665 KB, sempre troppi, e che trovi in allegato...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Linda R.
Linda R.
User
Autore

Provo a vedere se riesco ad inserire le immagini tramite una transizione con JavaScript e ti faccio sapere, nel frattempo grazie.

Leggi di più
Postato il da Linda R.
Linda R.
Linda R.
User
Autore

Dunque, secondo suggerimento di Kolasim, ho inserito uno script con immagini ed effetto fade. Mi chiedo come riesco a sovrapporre i testi a scorrimento sullo script? Purtroppo vanno a finire nella sezione sotto.

Leggi di più
Postato il da Linda R.
Claudio D.
Claudio D.
Moderator
Utente del mese IT

...mi pare che ora però ci siano grossi problemi con il menu hamburger, che appare quando si scende quasi in fondo...

Leggi di più
Postato il da Claudio D.
Giancarlo B.
Giancarlo B.
User

hai questo valore ... che sposta dal top di pagina le scritte...

<div id="imHeaderstyle="height: 719px;">

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Giancarlo ma questo valore viene dato direttamente dal programma e non da me.

Leggi di più
Postato il da Linda R.
Skeggia 12
Skeggia 12
Moderator

mah forse non ho capito...
per sovrapporre lo scorrimento a presentazione delle schede alle immagini, basterebbe mettere le immagini in stile righe e sopra lo scorrimento a schede con altezza adeguata alla centratura... o è troppo semplice senza codici?

Leggi di più
Postato il da Skeggia 12
Giancarlo B.
Giancarlo B.
User
Linda R.
Giancarlo ma questo valore viene dato direttamente dal programma e non da me.

Scusa ma hai un header alto 719px ?

Leggi di più
Postato il da Giancarlo B.
Giancarlo B.
Giancarlo B.
User

è alto 719px perche hai messo lo slide nell' header .... ma va nel corpo centrale 

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Ok ho fatto una prova diversa, ho creato una pagina nascosta in website e realizzato uno slide show con lo strumento slide show classico. Purtroppo con questo metodo i problemi sono 2. Lo slideshow viene visualizzato nel formato delle dimensioni che website lo fa pubblicare ed il testo continua a non potersi sovrapporre :/

Leggi di più
Postato il da Linda R.
Linda R.
Linda R.
User
Autore

Giancarlo ti spiego meglio. Ho realizzato il seguente sito

Prova Sito

inserendo la wowslide col sistema i-frame di kolasim da te indicato. Purtroppo come puoi ben notare mi crea dei problemi nella homepage che non riesco a risolvere, ovvero la sovrapposizione del menù sulla slide in maniera incorretta. Per cui volevo ovviare a questo problema realizzando una slide semplice con sovrapposizione di testo senza sfondo. Ma a quanto pare è peggio.

Leggi di più
Postato il da Linda R.
Giancarlo B.
Giancarlo B.
User
Linda R.
Purtroppo come puoi ben notare mi crea dei problemi nella homepage che non riesco a risolvere, ovvero la sovrapposizione del menù sulla slide in maniera incorretta.

... on Linda ho visto la Prova Sito, scusami se NON capisco (forse mi dovrei rileggere tutti i passaggi), ma cosa intendi per sovrapposizione del menù sulla slide in maniera incorretta undecided

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Ciao Giancarlo, nella pagina introduzione, se riduci la finestra o guardi il sito su un tablet o pc, noterai che il menù si sovrappone alla wowslide e che la parte di header di colore bianco non prosegue in orizzontale.

Leggi di più
Postato il da Linda R.
Giancarlo B.
Giancarlo B.
User
Linda R.
Ciao Giancarlo, nella pagina introduzione, se riduci la finestra o guardi il sito su un tablet o pc, noterai che il menù si sovrappone alla wowslide e che la parte di header di colore bianco non prosegue in orizzontale.

Linda... credo dipenda da come hai impostato sul programma il menù alla risoluzioni inferiori, devi controllare i breackpoint alle risoluzioni inferiori e impostarli come per la prima.

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Giancarlo ti allego l'immagine x farti capire cosa intendo. In pratica compare questa striscia bianca che non so a cosa sia attribuita.

Leggi di più
Postato il da Linda R.
Linda R.
Linda R.
User
Autore

Non ci sono sfondi nè nell'header, nè nel menù e nè negli sfondi. Non riesco proprio a capire da dove provenga.

Leggi di più
Postato il da Linda R.
Giancarlo B.
Giancarlo B.
User
Linda R.
Non ci sono sfondi nè nell'header, nè nel menù e nè negli sfondi. Non riesco proprio a capire da dove provenga.

Linda non ho il programma davanti non posso inviarti info più precise... ora ma ti ricordo (scusami se mi ripeto) che di header ce ne uno per ogni breackpoint ... quindi controlla anche gli altri.

Leggi di più
Postato il da Giancarlo B.
Linda R.
Linda R.
User
Autore

Come faccio a controllare gli header dei vari breackpoint? In responsive del programma non riesco nemmeno a vedere le anteprime.

Leggi di più
Postato il da Linda R.
Giancarlo B.
Giancarlo B.
User
Linda R.
Come faccio a controllare gli header dei vari breackpoint? In responsive del programma non riesco nemmeno a vedere le anteprime.

non potendo fornirti gli screenshot vado a memoria... se vai sullo stile del template sulla sinistra vedi i vari step dei breack...  il primo naturalmente è il desktop, clicca su quello sotto,  e controlla la disposizone del menù, come viene visualizzato, le dimensioni di header e footer se sono lo stesse o se vanno modificate, fai così anche per gli altri breack...

eventualmente vai anche sulla gestione di header footer ed anche quì trovi i vari breack ... verifica anche quelli.

Mi dispiace ma non riesco a darti altre info al momento.... spero ti siano utili.

Ciao.

Leggi di più
Postato il da Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User
Skeggia 12
mah forse non ho capito... per sovrapporre lo scorrimento a presentazione delle schede alle immagini, basterebbe mettere le immagini in stile righe e sopra lo scorrimento a schede con altezza adeguata alla centratura... o è troppo semplice senza codici?

Skeggia, d'accordissimo con quanto dici, è la via più semplice, tutto creato con le funzioni del programma tranne la GIF animata creata con software esterno (metto link dell'esempio online alla fine ma è importante leggere quanto scritto di seguito)

Ho usato la GIF animata creata da Linda (ci andrebbe un effetto di transizione più "morbido" tra una foto e l'altra ma ho esattamente preso quanto da lei creato in un esempio) e il risultato, abbastanza soddisfacente, è quello che si vede al link sottostante... Ma.. purtroppo c'è un "ma"... Website ha un limite che andrebbe risolto a mio avviso (magari poi apro un post a parte).

In pratica quando si restringe la finestra del browser al di sotto dei 700px e le scritte si adattano su tre righe, le parti inferiori delle lettere p e g (quelle con "stanghettine" sotto per intenderci) vengono irrimediabilmente tagliate (vedi screenshot allegato per capire meglio)

Provate voi stessi per verificare, il link del risultato finale è questo (tra l'altro non c'è nemmeno il problema del menù hamburger visibile invece nell'esempio di Linda):

http://www.bozzasito14.altervista.org/provaslide01/

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

P.S. ho segnalato la cosa in privato ad Incomedia. Molto probabilmente Incomedia mi dirà che la soluzione sarebbe ridurre la dimensione del font Oswald da 26pt a molto meno ma io voglio usare quella dimensione e poi una dimensione inferiore del font su quella slide/GIF animata a pieno schermo non avrebbe senso, così è tutto ben "equilibrato"

Leggi di più
Postato il da Giuseppe Guida
Skeggia 12
Skeggia 12
Moderator

@giuseppe: difatti è quanto volevo dire io... molto semplicemente, con le funzioni del programma, senza codici esterni... ma forse qualche volta, ci lasciamo prendere la mano da questi codici esterni... io stesso mi ero dimenticato dello scorrimento a schede tipo presentazione, che ha ricordato la mente vigile di Kolasim... per le risoluzioni inferiori, dalle mie parti si dice " t'adadatta' ", tradotto "ti devi adattare"... personalmente non condivido la navigazione e tutto questo sbattimento per adattare i siti alla navigazione smartphone, con un display così piccolo... secondo me sugli smartphone bisognerebbe navigare solo per i servizi (mappe, indicazioni varie, ricerche, ecc.) e non per visitare un sito di ecommerce per fare acquisti... ma è solo un mio pensiero...

un saluto a tutti...

Leggi di più
Postato il da Skeggia 12
Skeggia 12
Skeggia 12
Moderator

P.S. x giuseppe: ho visto ora il difetto che segnali: in attesa dell'intervento dello staff, prova a stabilire una interlinea maggiore di quella impostata di default da website (mi sembra che website imposti un 20% in più della grandezza della font... esagera...)... dovrebbe funzionare... e non tagliare le "gambe" alle lettere...

Leggi di più
Postato il da Skeggia 12
Giuseppe Guida
Giuseppe Guida
User

Skeggia... "ta da dà da fà" (ti devi dare da fare) e "t'adadattà" (ti devi adattare) si dice anche da me a Bari wink

L'interlinea mi sembra non si possa impostare con le sole funzioni di Website... Non ho il programma aperto in questo momento, non ricordo bene ma mi sembra proprio di no.

Leggi di più
Postato il da Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Giuseppe Guida
... ... ... ... (tra l'altro non c'è nemmeno il problema del menù hamburger visibile invece nell'esempio di Linda): http://www.bozzasito14.altervista.org/provaslide01/

ciao Giuseppe, ...il problema inspiegabilmente si trascina da > QUI, ...ove ti ho anche nominato, sperando nel tuo intervento come mia extension! ... cool ... visto che nei vostri esempi, è tutto regolare...wink

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Skeggia 12
Skeggia 12
Moderator

@giuseppe: si lo so che l'interlinea non si cambia con le funzioni del programma... ma per una volta... un piccolo codice...

line-height

per risolvere un problemino contingente (e risolve questo problema sicuramente) (dato che il programma automaticamente mi sembra aggiunga il 20% [corpo 26, il 20% = 5,2, quindi 31,2] in più del corpo della font... quindi esagera per vedere l'effetto che fa)... si può anche usare... in attesa che questa importante funzione possa venire inserita in website...

ciao

Leggi di più
Postato il da Skeggia 12
Giuseppe Guida
Giuseppe Guida
User

Ciao Kol, grazie per avermi menzionato nell'altro topic ma purtroppo sovente qui nell'Help Center diventa difficile seguire i vari topic aperti...

Cmq ho appena risposto nell'altro topic segnalato da te...

Per questo topic invece e per quanto riguarda il mio esempio postato sopra, il procedimento è questo:

l'Header va impostato con altezza pari a ZERO, il Menù viene posizionato sopra l'header e si dà la stessa altezza al Menù e allo Sfondo dell'Header (assegna allo sfondo dell'header il colore che vuoi dare al menù, menù che invece potrai lasciare trasparente o dello stesso colore dello sfondo dell'header, e poi nello sfondo dell'header inserisci anche il logo), poi si inserisce l'Oggetto Testo, si attivano le schede al suo interno, si creano i testi e si attiva dallo stile schede la visualizzazione come "presentazione" impostando a proprio piacimento gli altri valori e poi al PASSO 2 MODELLO/Personalizzazione/Opzioni su Scroll della Pagina imposti il Menù su "mantieni sempre visibile" e "estendi alla larghezza della finestra del browser" e ci inserisci il logo da visualizzare anche sullo scroll della pagina.

P.S. Ripeto l'unico problema, come descritto sopra, si ha sui testi scorrevoli con una certa dimensione del font che, al momento, vengono tagliati sotto nell'adattamento alle risoluzioni inferiori ma basta ridurre la dimensione del font e il problema si risolve. Intanto ho segnalato la cosa ad Incomedia e vediamo che succede.

Credo che il sistema della GIF animata in Stile riga + Oggetto Testo con schede sia la cosa più semplice se si vuole avere una effetto che dia l'idea di una slide full width con dei testi facilmente modificabili con le SOLE funzioni del programma (questo per la versione PRO 13, nella EVO le schede non ci sono)

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Si Skeggia, figurati, concordo, soluzione davvero semplice e pratica da inserire per risolvere le "gambe" tagliate su alcune lettere.

Dopo provo ma sono certo che andrà bene. Ciao!

Leggi di più
Postato il da Giuseppe Guida
Giancarlo B.
Giancarlo B.
User
Giuseppe Guida
Credo che il sistema della GIF animata in Stile riga + Oggetto Testo con schede sia la cosa più semplice se si vuole avere una effetto che dia l'idea di una slide full width con dei testi facilmente modificabili con le SOLE funzioni del programma (questo per la versione PRO 13, nella EVO le schede non ci sono)

Per la evo puoi utilizzate l'oggetto galleria crei i testi e li salvi .png senza sfondo.

Leggi di più
Postato il da Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Giuseppe Guida
... ... .. ... ... Credo che il sistema della GIF animata in Stile riga + Oggetto Testo con schede sia la cosa più semplice ... ...

... teoricamente sì, ...ma per la GifAnim, sicuramente no! ... cioè da evitare! ... wink

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Kol, non va sui dispositivi mobili la GIF animata? 

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Quale sarebbe l'inconveniente?

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

ah probabilmente la GIF su schermi retina display non rende al meglio... 

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Ciao Giancarlo, sì so che si può fare quello che hai proposto tu ma qui si cerca in effetti di ridurre al minimo l'uso di programmi o codici esterni ma credo proprio che la cosa sia impossibile: per sfruttare al meglio Website ci vuole sempre l'ausilio del codice esterno. Beh, vorrà dire che ci perfezioneremo nell'uso di codici esterni, non è poi un male, diversamente rimarremmo sempre allo stesso livello. smile Ciao

P.S. per Kolasim, ok, capito, ho letto il tuo post sulle GIF animate... E se vengono ottimizzate? 

Leggi di più
Postato il da Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Giuseppe Guida
Quale sarebbe l'inconveniente?

... bassa qualità e peso spropositato assolutamente da evitare, specialmente per il mobile,  motivato qui:  https://helpcenter.websitex5.com/it/post/163059#comment7

... ed ancor di più qua:   https://helpcenter.websitex5.com/it/post/163059#comment12

... le GifAnim potrebbero essere usate solo per piccoli e leggeri loghi o mini banner, e senza esagerare nella pagina ospite...

.

ciao

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Giuseppe Guida
Giuseppe Guida
User

Pefetto Kol. In effetti ho provato a creare una GIF animata di dimensioni 1920 x 820 e, aggiungendo anche qualche fotogramma in più per l'effetto di transizione tra una foto e l'altra ed ottimizzando il tutto, non si scende al di sotto di 1.5 MB per mantenere una qualità ottimale delle immagini. 

Leggi di più
Postato il da Giuseppe Guida
Fabio B.
Fabio B.
User

non ho letto tutti gli interventi perché il post é già lunghissimo, ma credo che con WebAnimator risolveresti ogni tua esigenza

Leggi di più
Postato il da Fabio B.
Giuseppe Guida
Giuseppe Guida
User

Ciao Fabio, grazie per il tuo intervento. L'esigenza esposta in questo topic riguarda Linda, io ho semplicemente realizzato praticamente il consiglio di Skeggia ma non ho la stessa esigenza di Linda. Per fare ciò che chiede lei uso solitamente Wowslider e i testi per ogni singola foto della slide li vado poi a personalizzare tramite lo stesso Wowslider.

Ciao ciao

Leggi di più
Postato il da Giuseppe Guida
Fabio B.
Fabio B.
User

ciao giuseppe; sì, mi riferivo a linda

Leggi di più
Postato il da Fabio B.
Giuseppe Guida
Giuseppe Guida
User

Ah ok Fabio wink 

Ciao

Leggi di più
Postato il da Giuseppe Guida
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Linda R.
Come faccio a controllare gli header dei vari breackpoint? In responsive del programma non riesco nemmeno a vedere le anteprime.

... lascia perdere tutte le personalizzazioni extra, slideshow e testi che siano, e dedicati alla realizzazione di un layout di base, che funzioni come quelli che hai visto, responsive, con menu in alto ed una intestazione vuota alta 100 pixel; ...dovrebbe essere semplice e senza complicazioni...

... quando l'avrai fatto, posta il LINK...  ...  e poi con l'aiuto degli stessi che si sono prestati prima, vedrai che, un passo alla volta,  risolverai rapidamente...

.



Leggi di più
Postato il da  ‪ KolAsim ‪ ‪