Inserire una gif in movimento in una pagina web
Autore: Samuele Z.
Visite 4890,
Followers 1,
Condiviso 0
Buongiorno, come faccio ad inserire una gif animata in una pagina Web??? Tutte le volte che utilizzo ( oggetto immagine) scelgo la mia gif, faccio anteprima la mia gif non si muove ma rimane una foto. AIUTO!!! Samuele
Postato il
sicuro...? Funzia sia anteprima che online...
http://provews.altervista.org/gif/
... bisogna vedere dove e come si inserisce, e se viene ridimensionata...
... un link come ha fatto Mirko per capire, sarebbe il minimo, ed anche allegare il file GIF originale da verificare...
.
ciao, KolAsim
Autore
Grazie ragazzi.... ora ho ancora una domanda sulle gif.... io vorrei inserire solo per un pultasante di un menù formato da 5 pulsanati una gif...quindi avere un menù dove un pulsante è diverso che brilla per via della gif....... anche qui quando inserisco la gif (INPOSTAZIONI AVANZATE - MENU- PAGINA CORRENTE) e faccio anteprima il puslante diventa una foto fissa....... sicuramnte devo fare scrive qualcosa in linguaggio html..... VI CHIEDO COSA E DOVE..........
ciao,
... attualmente non ho programmi in uso, ma se ricordo bene e se le cose fossero rimaste così, credo che non sia possibile, in quanto il testo del menu si fonderebbe con la grafica di sfondo...
... se non ricordo male, nell'esempio che segue, avevo editato con il mio AnimationShop i relativi files grafici: http://www.zspace.it/kolasim/website/menugrafico/ http://www.zspace.it/kolasim/wsx5_v8/memoriamenu/index.html
... oppure potresti inserire un menu alternativo, fatto con i tuoi files grafici...
.
ciao, KolAsim
Autore
Ciao, scusa ma non capito come risolvere il problema....... vorrei capire come hai fatto nell'esempi ad inserire la gif.... se io allego una gif nei pulsanti non si muove.... tu come hai fatto?????? Ti chiedo di spiegarmi bene nei minimi passaggi perchè non sono afferto con html..... Grazie per tutto.
Samuele.
... sono vecchi esempi fatti per l'Avo di Answers, e come detto, forse "avevo editato con il mio AnimationShop i relativi files grafici"
... cioè, quasi sicuramente, avevo al Passo_5 > Esportato il Sito su DISCO, aperto la cartella relativa, che per la v.8 è la "res", caricati i files nel programma mensionato prima, AnimationShop, e quindi animati, poi con FilesManager, o con FTP terzo, li ho esportati nella cartella "res" del Sito in RETE, ed avendo mantenuto o stesso nome, sono andati a sostituire quelli originali...
.
ciao
Autore
Un'altra cosa..... anche se non si riesce ad inserire una gif ho bisogno di capire se e fattibile avere un pulsante diverso da tutti gli altri nel menù ( magari solo il colo del bottone)...
La gif la ho inserita semplicemente con oggetto immagine senza fare niente di più...
Autore
Ringrazio tutti per i vostri i consiglio... Io ora mi trovo ad avere un menù con 5 bottoni.... sono gialli e diventano verdi quando passa il mouse.... su una pagina in particolare (dalla mappa della creazione del sito) ho cliccato su impostazioni pagina e sono andato su grafica... qui ho trovato " icona da visualizzare sul menù" qui posso inserire un bottore di cole diverso (esempio viola)... quindi ora il mio menù e formato da 5 bottoni 4 gialli che diventano verdi quando passa il sopra il mouse e uno fisso viola che non cambia mai colore in quanto in "icona da visualizzare sul menu" non c'è la funzione al passagio del mouse..... ora vi espongo i miei nuovi quesiti:
1)il problema è che se inserisco una gif in "icona da visualizzare sul menu" rimane ferma come foto come posso renderla in movimento???
2) come posso cambiare il mio pulsante viola al passaggio del mouse se in impostazione pagina dal mappa sito/ grafica/" icona da visualizzare sul menù"non c'è la funzione al passagio del moise?????
Se occore inserire qulache stringa in HTML chiedo di mettervi una mano sul cuore e indicarmi per iscritto tutti i passaggi perchè conosco veramente poco questo linguaggio...... Grazie attendo le vostre interessantissime soluzioni........
Samuele
ciao,
.1 ... inizia a mettere il LINK del SITO per osservarne la struttura;
.2 ... allega le due/tre GIF che vuoi usare per gli stadi del pulsante;
.3 ... e poi si vedrà... .. . .
...
... comunque, per avere un pulsante personalizzato non proprio nel menu, ma nella Barra Intestazione, puoi fare questa prova:
a) - chiama la tua GifAnim col nome pippo.gif ...per poi identificarla facilmente nel codice HTML;
b) - in una pagina che dal menu renderai non visibile, inserisci un Oggetto Immagine, ed importa l'immagine pippo.gif ... e gli assegni il LINK che ti serve
c) - avvia l'Anteprima di questa pagina, clicca con il destro del mouse per aprire il sorgente HTML, individua il TAG <IMG> che contiene la stringa relativa a pippo.gif
d) - selezioni la parte di codice compresa da <IMG *** ad /> ...compresi
e) - fai "copia" con il destro del mouse
f) - vai indietro in Barra Intestazione, ed inserisci un Oggetto Codice HTML (simbolo </>)
g) - nella finestrella per il codice incolli la stringa che avevi copiato <IMG ***/>
h) - fatto! ... avvia l'anteprima e vedi...
.
ciao, KolAsim
Dai una occhiata qui
http://www.essedi.altervista.org/menuimmagini/pagina-1.html
L'effetto è controllato tramite CSS, che trovi all'inizio del codice.
Il codice CSS risponde anche all'esigenza di avere immagini diverse per ogni voce del Menu principale (qualcuno lo aveva chiesto) ed immagini per lo stato attivo diverse dallo stato hover.
Ricordati di inserire le immagini (delle giuste dimensioni) nela cartella files tramite il comando Aggiungi della Scheda Esperto di un oggetto HTML qualsiasi.
Autore
Ringrazio per la vostra gentilezza ma ancora dei problemi... in particolare a KolAsim allego la gif (PULSANTE VIOLA che devo sistemare la dimensione corretta) che vorrei che si muovesse e di seguito ti indico un idirizzo web di prova www.aiuto88.altervista.org dove puoi notare che la gif non si muove.....
ciao Samuele,
... io sono senza programmi, ...però, ...inizia a fare questa prova:
1 - al Passo 1 - Impostazioni Generali > sezione Esperto | ▪Codice personalizzato | Prima della chiusura del tag HEAD ... incolla questa stringa di codice:
<style> #imMnMnNode5:hover .imMnMnFirstBg { background-image: url('../files/pulsante.gif'); height: 26px; width: 120px;}</style>
2 - tramite un Oggetto HTML&WIDGETS qualsiasi, e se non c'è lo aggiungi tu, nel pannello ESPERTO alleghi il file animato pulsante.gif ...che per default andrà a posizionarsi nella cartella "files";
... avvia l'Anteprima a fammi sapere cosa avviene...
.
... dovresti creare il GifAnim sulla base dello sfondo e misure esistenti, o in trasparenza...
.
ciao
Non che sia obbligatorio, ma hai guardato il sito che ti ho segnalato?
http://www.essedi.altervista.org/menuimmagini/pagina-1.html
Te lo chiedo perché a me sembra che risponda a tutti e due i tuoi quesiti.
Quello che chiedi per il "pulsante viola" coincide con quanto lì realizzato per il pulsante della Home Page (le istruzioni sono nella Home Page, ma per vedere l'effetto devi essere posizionato su un'altra pagina).
Credo che così come scritto il codice non può funzionare, a meno di sostituirlo con
<style> #imMnMnNode5:hover .imMnMnFirstBg {background-image: url(files/pulsante.gif'); height: 26px; width: 120px;}</style>
eliminando ../ (due punti e slash) davanti a files, come spiegato al punto 6 del mio esempio.
Autore
VI RINGRAZIO TANTISSIMO....Esse Di ho visionato il link indicato è proprio quello che voglio ottenere..... seguendo i tuoi consigli e di KolAsim ora sono a questo punto ( vedete sito www.aiuto88.altervista.org) la gif si vede solo quando il mouse passa sopra prima no.... vorrei che si visualizzasse anche prima.....Esse Di ho provato sia la tua string HTML che quella di KolAsim ( che si differienziava solo per ../ prima di files) a me funziona solo se indico i puntini e la barra..... Sono nelle vostre mani.... non so come sdebitarmi per il vostro aiuto e per il tempo che mi state dedicando vi farò vedere il sito una volta ultimato....
Grazie
Samuele.
In Impostazioni Generali, Esperto, Prima della chiusura del tag HEAD inserisci il contenuto del file allegato
pulsante.gif, pulsante_h.gif, pulsante_c.gif sono le immagini del pulsante nello stato normale, hover (al passaggio del mouse) ed attivo (voce del menu selezionata).
Esse vanno caricate nella cartella files tramite il comando Aggiungi della Scheda Esperto di un oggetto HTML qualsiasi.
Se non dovesse funzionare prova pure ad inserire ../ prima di files (ma per me la cosa sarebbe strana).
ciao,
... la logica sarebbe quella quella che hai adottato, come l'hai vista nei miei esempi, nello stato normale il pulsante è stazionario, nello stato sopra il pulsante si anima (o cambia colore), e per adesso, a titolo di esempio va bene...
... adesso se vuoi che lo stato del pulsante sia identico per tutti gli STADI, devi adottare quest'altro codice, al posto di quello che avevi usato prima:
<style>#imMnMnNode5 { background-image: url('../files/pulsante.gif'); height: 26px; width: 120px; }
#imMnMnNode5:hover .imMnMnFirstBg { background-image: url('../files/pulsante.gif'); height: 26px; width: 120px;}
#imMnMnNode5.imMnMnCurrent span.imMnMnFirstBg { background-image: url('../files/pulsante.gif'); height: 26px; width: 120px;}<style>
... tieni sempre presente che sono sempre senza programmi né PC, a parte questo che uso solo per connettermi, ... quindi mi esprimo per idee e per memoria residua, spulciando nel tuo codice, ...e comunque i suoi frutti li ha dati, visto che sei riuscito ad ottenere un risultato positivo...
... prova con quest'ultimo, ed eventualmente chiedi pure altri chiarimenti; ...per me dovresti rivedere l'impostazione della cornice grafica del pulsante, forse meglio in trasparenza, provaci...
... e sempre per me, per lo stato normale, dovresti almeno usare un colore diverso, anche se con lo stesso tipo di animazione...
.
ciao, KolAsim
... a titolo informativo, la directory (../), si chiama Path trasversale, e serve per uscire dalla cartella ospite per entrare in una cartella di pari livello che ne deve fare uso...
Autore
Ciao e grazie vivissimo ragazzi ha funzionato.... appena temino il sito ve lo mostro..... siete MITICIIII!!!!!!!!
Autore
Ciao Esse Di, ho ancora un piccolo problema con il cambio bottone... ti spiego meglio io ho creato un pulsante "promozioni" quando il mouse va sopra appare una tendina sottostante al pulsante con questi bottoni (last minute-stagionale-mensile-settimanale).... io ho creato dei bottoni GIF nello stato normale, over e attivo che voglio visualizzare.... pur avendo caricato i bottoni gif nella cartella files e avendo individuato il nome immagine bottone di last minut nel codice html creato da web site (imMnMnImg) non riesco a visualizzare la mia gif di questo bottone nello stato normale!!!! credo che sbaglio o manca una parte di codice... di seguito di riporto quello che ho scritto sulla base del tuo file allegato...
#imMnMnNode4 {
background-image: url("files/lastminut.gif");
height: 30px;
width: 1800px;
}
#imMnMnNode4:hover .imMnMnImg {
background-image: url("files/lastminutcambio.gif");
height: 30px;
width: 180px;
}
#imMnMnNode4.imMnMnCurrent span.imMnMnImg {
background-image: url("files/lastminutcambiofermo.gif");
height: 30px;
width: 180px;
}
ti chiedo ancora aiuto...
GRAZIE!!!
Samuele....
Io vorrei aiutarti, me tu dovresti incominciare ad utilizzare il mio codice
Autore
Ciao,
questo è il tuo codice che ho utilizzato per modificare i pulsanti (utilizzato file testo che mi avevi allegato).... ha funzionato per tutti i pulsanti ma non per quelli nella tendina chi ti dicevo...
imMnMnImg l'ho visto nel codice sorgente creato da web site ( esportato progetto, aperto pagina web con browser crome e utilizzato la funzione visualizza sorgente... come da foto allegata che riporta solo la parte interessata) ho provato ad inserie imMnMnImg al posto di imMnMnFirstBg........ ho visto che il pulsante sotto la tendina è cambio nello stato attivo e hover ma non è cambiato lo stato normale... di seguito riporto il tuo codice ho messo (4 a imMnMnNode) che corrisponde al primo pulsante nella tendina
#imMnMnNode4{
background-image: url("files/lastminut.gif");
height: 30px;
width: 1800px;
}
#imMnMnNode4:hover .imMnMnFirstBg{
background-image: url("files/lastminutcambio.gif");
height: 30px;
width:180px;
}
#imMnMnNode4.imMnMnCurrent span.imMnMnFirstBg {
background-image: url("files/lastminutcambiofermo.gif");
height: 30px;
width: 180px;
}
in questo modo il mio pulsante non cambia....
"Hai letto la nota a margine del mio esempio? Vi si parla proprio del fenomeno da te esposto" scusa ma ho fatto ripassare tutta la conversazione ma non trovo questa nota...
so di essere un po pesante......Spero di essere stato chiaro nell'esporre il tutto.... ti chiedo un tuo consiglio.
Samuele.
Credo di avere equivocato. Ad evitare tali incomprensioni si dovrebbe allegare sempre l'indirizzo del link dove si verifica l'inconveniente lamentato, come ti è stato richiesto e come hai fatto la prima volta con il tuo famoso "pulsante viola".
Credo di avere capito solo ora (credo, ma non posso esserne certo, in mancanza del link) che tu voglia applicare una immagine animata ad una voce del menu di secondo livello.
Ebbene, il mio esempio serve a modificare a piacimento il menu di primo livello, lasciando invariati tutti gli altri livelli. Questo è il suo punto di forza, rispetto ad altri metodi che trovi su Answer.
Quando parlo di "mio esempio" mi riferisco a questo
http://www.essedi.altervista.org/menuimmagini/index.html
In fondo trovi la nota di cui parlavo prima. riferita, però, al menu di primo livello. Come puoi vedere , le voci del menu a cascata di Livello 1 sono testuali.
Qui viene spiegato come realizzare un menu personalizzato a due livelli, ma senza immagini
http://www.essedi.altervista.org/_menuH/index.html
Se la mia attuale interpretazione è corretta, cioè se sei riuscito ad applicare una immagine animata al menu di secondo livello, vuol dire che il tuo codice è un passo avanti rispetto al mio. Dovresti solo risolvere il problema dello stato normale. Io però sono decisamente contrario alle eccessive animazioni.
PS. Vedo che hai giustamente corretto ../files/ in files/
Autore
Ciao,
grazie per il link ma faccio veramente molta fatica a capire la parte di codie che serve a me....
ti lascio questo link che puoi vedere fino dove sono arrivato....
www.aiuto88.altervista.org
so che la souluzione è sotto al mio naso ma non riesco a trovarla.....
GRAZIE.
Samuele.
Samuele, il tuo link conferma la mia interpretazione: vuoi inserire delle immagini personalizzate nelle voci del menu a tendina di secondo livello.
Ribadisco quanro affermato nel mio precedente messaggio
Aggiungo che ciò, a seconda delle circostanze, può essere visto come un limite invece di un punto di forza. Pazienza! Questo è quel che ho saputo fare io fino a questo punto. Per il momento non so dirti perché il tuo codice non funziona.