Come fare a

Effetti sulle immagini delle pagine web

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

Menù a tendina con immagini:

Menu a tendina per le 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.

Un'immagine diversa per ogni giorno della settimana:

Sempre per rendere il nostro sito più vario e non annoiare i visitatori, è possibile far apparire un'immagine diversa per ogni giorno della settimana. Il codice è questo:
<div align="center">
<script>
var mondayimg="URL immagine"
var tuesdayimg="URL immagine"
var wednesdayimg="URL immagine"
var thursdayimg="URL immagine"
var fridayimg="URL immagine"
var saturdayimg="URL immagine"
var sundayimg="URL immagine"
var mydate=new Date()
var today=mydate.getDay()
if (today==1)
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+mondayimg+'"></a>')
else if (today==2)
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+tuesdayimg+'"></a>')
else if (today==3)
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+wednesdayimg+'"></a>')
else if (today==4)
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+thursdayimg+'"></a>')
else if (today==5)
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+fridayimg+'"></a>')
else if (today==6)
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+saturdayimg+'"></a>')
else
document.write('<a href="URL collegamento" target="_blank"><img style="width:100%; max-width:100px" src="'+sundayimg+'"></a>')
</script>
</div>

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

Messaggio e/o immagine che cambia a orario:

Vai alla guida:  Effetti sul testo

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 velocita` 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:

Esempio:
TESTO ALTERNATIVO

Per far cambiare un'immagine al passaggio del mouse, bisogna 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".

Immagine che cambia ad ogni caricamento della pagina (effetto Random):

Click per l'anteprima funzionante

Il codice che vi serve è questo:
<div align="center">
<script language="javascript" type="text/javascript">
var img = new Array
("URL immagine", "URL immagine", "URL immagine");
var x = Math.floor(img.length * Math.random(1));
document.write('<a href="URL collegamento" target="_blank"><img src=\"'+ img[x] +'\" alt=\"\">');
</script>
</div>

I parametri in rosso sono quelli da modificare, così:
Se volete mettere un collegamento diverso per ogni immagine, il codice diventa così:
<div align="center">
<script language="javascript" type="text/javascript">
var images = [],
index = 0;
images[0] = "<a href = 'URL collegamento' target='_blank'><img src='URL immagine' alt=' '></a>";
images[1] = "<a href = 'URL collegamento' target='_blank'><img src='URL immagine' alt=' '></a>";
images[2] = "<a href = 'URL collegamento' target='_blank'><img src='URL immagine' alt=' '></a>";
index = Math.floor( images.length * Math.random() );
document.write(images[index]);
</script>
</div>

Se, facendo le prove, riaggiornerete molto velocemente la pagina, può essere che, ogni tanto, l'immagine non cambi, ma questo non capiterà aspettando anche solo pochi secondi.

Immagine con password

Esempio funzionante
(la password corretta è: 1234)
<script type="text/javascript">
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.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: