Home -» Network -» Effetti sulle immagini

Effetti sulle immagini delle pagine web

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web

Sommario:

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Menù a tendina con immagini:

Click per l'anteprima funzionante

Codice:

<html>
<head>
<script language="javascript">

</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="URLimmagine1">Titolo 1</option>
<option value="URLimmagine2">Titolo 2</option>
<option value="URLimmagine3">Titolo 3</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><a id="link"
href="Link1" target="_blank"><img src="URLimmagine1" name="pictures" style="max-width:100px; width:100%"></a>
</td>
</tr>
</table>
</body>
</html>

I parametri da modificare sono quelli in rosso, in questo modo:

"Link1","Link2", "Link3": qui dovete inserire, in sequenza, l'URL dei collegamenti che si apriranno cliccando sulle immagini, Se non volete il collegamento, lasciate i campi vuoti.
URLimmagine1/2/3 ecc: qui dovete inserire l'indirizzo delle immagini.
Titolo 1/2/3: il titolo di ogni immagine (che apparirà nel menù a tendina).
max-width="100": questa è la larghezza massima, in pixel, delle immagini. Le immagini si adatteranno alla larghezza dello schermo se più piccolo della larghezza massima che avrete impostato. L'altezza si regolerà in automatico.
URLimmagine1: qui ripetete l'indirizzo della prima immagine.

In più, ho segnato, in colore verde, il tag target="_blank", che apre il collegamento in una nuova scheda del browser. Se volete che il collegamento si apra nella stessa scheda, rimuovetelo.

Immagine che compare, o scompare dopo un tempo definito:

<html>
<head>
<script>
function cambia(){
var immagine = document.getElementById("idImmagine");
immagine.style.display = "inline";
}
setTimeout("cambia();", 5000);
</script>
</head>
<body>
<img id="idImmagine" style="display: none; width:100%; max-width:400px" src="URLimmagine">
</body>
</html>

I parametri da modificare sono quelli in rosso, in questo modo:

inline: questo comando fa comparire l'immagine dopo il tempo stabilito, se volete ottenere l'effetto contrario, cioe` farla scomparire, dovete sostituire inline con "none"
5000: e` il tempo che deve trascorrere, espresso in millisecondi
max-width:400px: è la larghezza massima dell'immagine. Le dimensioni si adatteranno in automatico a schermi più piccoli.
URLimmagine: qui mettete l'indirizzo dell'immagine

Immagine che compare piano, piano con effetto dissolvenza (fade):

<html>
<head>
<script>
var val = 0;
function cambiaOpacita(){
var immagine = document.getElementById("im");
immagine.style.opacity = val/100;
immagine.style.filter = 'alpha(opacity = ' + val + ')';
}
function aumentaOpacita()
{
val += 2;
cambiaOpacita();
if(val<100)
{
setTimeout("aumentaOpacita();", 50);
}
}
</script>
</head>
<body>
<img id="im" style="width:100%; max-width:400px" src="URLimmagine" onLoad="aumentaOpacita();">
</body>
</html>

Il valore 50 corrisponde alla velocità di dissolvenza e potete aumentarlo, o diminuirlo a piacere.

Al posto di URLimmagine mettete l'indirizzo dell'immagine che deve apparire.

max-width:400px è la larghezza massima dell'immagine. Le dimensioni si adatteranno agli schermi più piccoli.

Immagine che cambia al passaggio del mouse:

Per far cambiare un'immagine al passaggio del mouse, potete usare questo codice:

Inserite l'URL delle immagini dove indicato e, al posto di "Testo", mettete la scritta che volete esca sulla seconda immagine. Il testo alternativo apparirà nel caso in cui il browser dell'utente non supporti questo effetto.
Questo codice può servire anche per ingrandire una miniatura al passaggio del mouse, mettendo l'URL della miniatura al posto di quello della prima immagine e quello dell'immagine ingrandita al posto della seconda immagine.

Impostate la larghezza massima per le immagini. Le dimensioni si adegueranno agli schermi più piccoli.

Se volete che la seconda immagine sia cliccabile e collegata ad un link, il codice da usare è questo:

In questo modo, il collegamento si aprirà in una nuova scheda del browser.
Se preferite che si apra nella stessa scheda, dovete togliere il tag target="_blank".

Aggiornamento: il problema

Secondo le nuove norme di Google, le immagini devono essere caricate usando i nuovi formati. Per fare questo, conservando anche i formati tradizionali per i browser che non supportano i nuovi, si utilizza il tag "picture" includendo la voce "source" (per info: I contenuti del sito). Ciò crea un problema per ottenere il cambio di immagine onmouseover con il metodo sopra indicato. Per fortuna, esiste la soluzione.
Vai alla pagina Soluzioni CSS della sezione Risorse per webmaster, alla voce "Cambio immagine onmouseover usando picture source per formato avif".

Per effetti particolari:

Membership -> Le animazioni

Immagine con password

Esempio funzionante
(la password corretta è: 1234)

Con questo codice, potete proteggere un'immagine con password.

Modificate le parti in rosso, in questo modo:

password: qui inserite la password che preferite.
Inserisci la password: qui mettete la frase che volete appaia agli utenti
URL immagine 1: qui mettete l'indirizzo dell'immagine che apparirà se verrà digitata la password esatta.
URL immagine 2: qui mettete l'indirizzo di un'immagine da visualizzare se verrà inserita la password sbagliata.

Sia chiaro che questo script non può impedire di visualizzare l'immagine, o di scaricarla cercandone l'indirizzo nel codice sorgente.

Immagine con effetto rotazione

Esempio funzionante

Questo divertente effetto, si ottiene con il codice che vedete sotto. Al posto di URL immagine, dovete mettere l'indirizzo della vostra immagine. Alla voce max-widht, impostate la larghezza massima dell'immagine, le proporzioni verranno mantenute in automatico. Dove c'è il cancelletto #, può essere messo un link di collegamento. Potete regolare anche la distanza del div contenitore dai margini per permettere la rotazione senza che gli angoli dell'immagine vengano tagliati.

<html>
<head>
<style>
.rotazione {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotazione:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
</head>
<body>
<div align="center" style="margin: 40px">
<a href="#"> <img style="width:100%; max-width:400px;" class="rotazione" src="URL immagine"/></a>
</div>
</body>
</html>

Fonte

Bottoni che aprono e chiudono un'immagine:

Esempio:

<button onclick='document.getElementById("immagine").style.display = "block"'>Visibile</button>
<button onclick='document.getElementById("immagine").style.display = "none"'>Nascosto</button>
<img src='URLimmagine' id='immagine' style="display:none;
width:100%;
max-width:400px;">

Le parti personalizzabili sono quelle in rosso. Potete impostare la dimensione massima dell'immagine, cambiare il testo che appare sui bottoni e, al posto di "URLimmagine", dovete mettere l'indirizzo della vostra immagine.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con: