Effetti sulle immagini

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:
  • "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.

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:
  • <div align="center">: serve ad allineare l'immagine nella pagina, le opzioni sono: center (al centro), left (a sinistra), right (a destra).
  • URL immagine: qui dovete inserire l'indirizzo delle sette immagini, una per ogni giorno della settimana. I nomi dei giorni sono in inglese e questa è la corrispondenza:monday/lunedì, tuesday/martedì, wednesday/mercoledì, thursday/giovedì, friday/venerdì, saturday/sabato, sunday/domenica. I file delle immagini devono avere la stessa estensione (.jpeg, .gif ecc..).
  • URL collegamento: qui potete inserire un link di collegamento per ogni immagine. Se il collegamento non vi interessa, potete toglierlo eliminando la parte della stringa corrispondente,così: ('<a href="URL collegamento" target="_blank"><img src="'+sundayimg+'"></a>') eliminate tutte le parti in rosso e lasciate quelle che ho segnato in grassetto, parentesi e virgolette comprese.
  • max-width:100px: è la larghezza massima dell'immagine. Se lo schermo è più piccolo di tale larghezza, l'immagine adatterà le sue dimensioni in automatico.

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:
  • 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 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ì:
  • div align="center": serve per posizionare l'immagine rispetto alla pagina, le opzioni sono center(al centro)-left(a sinistra)-right(adestra).
  • URL immagine: qui dovete inserire l'indirizzo dell'immagine, potete inserirne quante ne volete, mettendo gli URL tra virgolette e separandoli con una virgola.
  • URL collegamento: qui dovete inserire l'indirizzo del collegamento, che si aprirà cliccando sulle immagini. Il collegamento sarà lo stesso per tutte le immagini.
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:
  • 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.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con: Effetti sul testo

E molto altro ancora se leggi:
Tutti gli argomenti