ho cercato un pò ovunque, ma non ho trovato nulla, forse perchè è ftalmente banale che non c'è nemmeno bisogno di aiuti.
Spero di postare nella sezione giusta.
Da inesperto chiedo:
Ho un pulsante, ci clicco sopra e mi appare un'immagine. Fin qui ok.
Ora vorrei che l'immagine apparisse in dissolvenza.
Ho trovato di tutto, dai movie agli slideshow.....a me serve solo x una immagine!!!!!
Chi mi aiuta????
no, sei ot
in genere effetti di dissolvenza possono essere creati via javascript o flash, ma per capire bene cosa / come serve a te (e quindi anche per spostarti) sarebbe opportuno vedere un effetto di quello che vuoi creare, che magari hai già trovato su un altro sito in giro per la rete.
Vorrei che la mia immagine si presenti lentamente.....una dissolvenza.....dal niente dello sfondo della pagina web all'apparizione dell'immagine pian piano....non come accade sempre (o quasi) dal niente all'immagine! Una cosa graduale ...come fa la dissolvenza!!
Ho trovato questa
http://conme.files.wordpress.com/200...nza-finale.gif
(ci mette un pò.....)
il testo non mi interessa...questa immagine sparisce..io dovrei ottenere il contrario cioè deve apparir......tenendo conto che la mia immagine si apre cliccando un punsante e non è quindi sempre visibile......
ok, ora è chiaro. il link da te postato richiama una semplice gif animata, ma probabilmente ottieni un effetto ed una qualità dell'immagine migliore utilizzando javascript. Se questa soluzione ti va bene, ti sposto in js per approfondimenti.
va benissimo....la gif animata era solo x fare vedere l'effetto che volevo ottenere.....
grazie....
Quindi avrai già nel BODY un Tag IMG con un NAME, al quale invii l' URL dell' immagine tramite un' istruzione JS.
Nell' esempio qui sotto, sono rappresentati dal Tag img name="viewer" e dalla function view()
Le dissolvenze (chiamate: fade-in fade-out) vengono ottenute lavorando sulla proprietà OPACITY.
Il fatto è che l' opacità viene gestita da istruzioni diverse a seconda dei navigatori; diverse sia per codificarla nello STYLE (CSS) che in JavaScript.
Quindi verifica questo primo esempio su Browser che non sia IExplorer (che vuole altra sintassi).
Le parti in rosso aggiunte riguardano quello che vuoi ottenere.
<html>
<head><title>faded appearence</title>
<script type="text/javascript">
 function view(){
    document.images["viewer"].src = "http://forum.html.it/forum/avatar.php?userid=124300";
 }
 var oplevel = 0;
 function fade(){
    document.images["viewer"].style.opacity = oplevel;
    oplevel = oplevel+0.1;
   
 }
</script>
</head>
<body>
<div align="center">
<br>
   <a href="javascript: view();">Visualizza Immagine</a> |
   <a href="javascript: fade();">Avvia Dissolvenza</a> (clicca ripetutamente)<br>
<br>
<img name="viewer" src="">
</div>
</body>
</html>
La function fade() (che fa crescere il livello di opacità), diventa automatica se la modifichi nella:
 function fade(){
    document.images["viewer"].style.opacity = oplevel;
    oplevel = oplevel+0.1;
    setTimeout('fade();', 100);
 }
dove compare un timer,
setTimeout() che richiama la funzione fade() stessa dopo 100 milli-secondi: è quello che si chiama ricorsione.
Si esegue tutto in un click se facciamo:
 function fade(){
    document.images["viewer"].style.opacity = oplevel;
    document.images["viewer"].src = "http://forum.html.it/forum/avatar.php?userid=124300";
    oplevel = oplevel+0.1;
    setTimeout('fade();', 100);
 }
Ma è ancora una soluzione approssimativa.
Alla prossima, ciao
Enzo
Nelle soluzioni elaborate si va incontro a due "pecche" :
- Il Valore di oplevel, una variabile che abbiamo introdotto per definire il livello di opacità (e che potevamo anche chiamare giuseppe), continua a crescere indefinitamente, anche oltre l' 1 necessario, e ad essere inviato al Tag img name="viewer" perché non c'è alcuna istruzione che arresta la ricorsione.
Questa operazione tiene impegnato il processore del computer, anche se per un carico trascurabile, sinché non si chiuderà la pagina; anche se il tutto funziona, non è un buon modo di concludere le cose.
Introdurremo un if -statement per cui, se oplevel ha già raggiunto il livello massimo necessario, non si attiverà più il setTimeout() che procede alla ricorsione temporizzata della funzione.
- Nell' ultima versione della function fade() l' URL dell' immagine continua ad essere inviato ripetutamente al Tag IMG visualizzatore (basterebbe una prima volta); quantunque l' immagine trovasi ormai nella cache del Browser, questa operazione implica on re-loading continuo di quell' immagine.
Un altro approccio può consistere nel partire da un' immagine già presente e con opacità a 0 zero, nell' HTML regolare; poi la rendiamo visibile incrementandone l' opacità.
Un po' come il passaggio da un display: none; a un display: block; che anche può essere il metodo adottato nella tua pagina per far apparire l' immagine. Solo che questo consente solo "o tutta o niente" visibilità, quest' altro invece prevede gradi intermedi.
Allora il Tag diventa così, con una doppia definizione di STYLE:
<img name="viewer" src="url_immagine.jpg" style="opacity: 0; filter: alpha(opacity=0);">
filter: alpha(opacity=0); è per Internet Explorer e va da 0 a 100;
opacity: 0; è per altri Navigatori e va da 0 a 1;
Ti posto velocemente (devo chiudere) un esempio che funziona con tutti i Browser attuali:
codice:<html> <head><title>cross-browsers faded appearence</title> <script type="text/javascript"> var oplevel = 0; function fade_in(){ document.images["viewer"].style.opacity = oplevel/100; document.images["viewer"].style.filter = "alpha(opacity = " + oplevel + ")"; oplevel = oplevel + 1; if (oplevel < 100){ setTimeout('fade_in();', 100); } } </script> </head> <body> <div align="center"> Avvia Visualizzazione Immagine in Dissolvenza</div> </body> </html>
Permessi di invio
Rispondi quotando