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">
<!--
urls = [ "Link1","Link2", "Link3" ];
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options
[document.mygallery.picture.selectedIndex].value;
document.getElementById("link").
href = urls[document.mygallery.picture.selectedIndex];
}
//-->
</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:
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:

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:
<img border=”0” style="width:100%; max-width:400px" src="URL prima immagine?" onmouseover="this.src='URL seconda immagine?';"onmouseout="this.src='URL prima immagine?';" title="Testo" alt="Testo alternativo"/>

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:
 <a href="URLcollegamento" target="_blank"><img border=”0” style="width:100%; max-width:400px" src="URL prima immagine?" onmouseover="this.src='URL seconda immagine?';" onmouseout="this.src='URL prima immagine?';" title="Testo" alt="Testo alternativo"/>

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)
<script>
var password;
var pass1 ="password";
password=prompt("Inserisci la password:","");
if (password==pass1) {
  window.location= "URL immagine 1";
} else {
  window.location= "URL immagine 2";
}
</script>

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

Modificate le parti in rosso, in questo modo:
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:

Leggi anche: Creare un sito da zero