Effetti sulle immagini

di Maria Silvana Radice







Effetti sulle immagini

Effects with images


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


Menù a tendina con immagini:

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="Titolo 1" 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 style="max-width:100px; width:100%"   src="URLimmagine1" name="pictures"></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.
  • Titolo 1: il titolo dell'immagine che apparirà per primo nel menù all'apertura della pagina.
  • 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.

Per inserire questo codice in Google sites, dovete seguire la guida Come inserire codici e scripts in Google sites.


Un'immagine diversa per ogni giorno della settimana:

Esempio:
(naturalmente....il cambio immagine lo constaterete tornando qui anche domani.. )

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.
In Google sites, questo codice, va inserito seguendo la procedura Come inserire codici e scripts in Google sites.

Messaggio e/o immagine che cambia a orario:

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
In Google sites questo codice va inserito seguendo la guida: Come inserire codici e scripts in Google sites

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.

In Google sites questo codice va inserito seguendo la guida: Come inserire codici e scripts in Google sites

Come far apparire un'immagine accanto ad un testo al passaggio del mouse:

Esempio:

Per far aprire un'immagine, passando col mouse su un testo, si può usare questo codice:

<html>
<head>
<style>
span{display:none;position:absolute;top:0px;left:50px;z-index:+100;}
.element{position:relative;width:50px;}
.element:hover span{display:block;}
</style>
</head>
<body>
<div class="element">
<a href="#">Testo </a>
<span><img src="URLimmagine" width="100" /></span>
</div>
<div class="element">
<a href="#">Testo</a>
<span><img src="URLimmagine" width="100" /></span>
</div>
</body>
</html>

Gli elementi da modificare, sono quelli in rosso, in questa maniera:
  • Testo: qui scrivete il testo visibile
  • URLimmagine: qui inserite l'indirizzo web dell'immagine che apparirà
  • widht="100": questa è la larghezza dell'immagine (per l'altezza, verranno mantenute, automaticamente, le proporzioni)
Per aggiungere altro testo, basta ripetere questa stringa di codice:

<div class="element">
<a href="#">Testo </a>
    <span><img src="URL immagine" width="100" /></span>
</div>

Il testo può essere formattato, modificando la stringa in questo modo:

Testo in grassetto:
<div class="element">
<a href="#"><b>Testo</b> </a>
    <span><img src="URL immagine" width="100" /></span>
</div>

Grandezza del testo:
<div class="element">
<a href="#"><font size=1>Testo</font> </a>
    <span><img src="URL immagine" width="100" /></span>
</div>

(modificate il valore di font size=1, numero più alto=caratteri più grandi)

Colore del testo:
<div class="element">
<a href="#"><font color="red">Testo</font> </a>
    <span><img src="URL immagine" width="100" /></span>
</div>

(modificate il valore di font color="red", col colore che preferite, scritto col suo nome inglese, o inserendone il codice (Editor colori)

Infine, se volete modificare le impostazioni insieme, la stringa (da mettere nel codice), sarà così:
<div class="element">
<a href="#"><font size=4; font color="red"><b>Testo</b> </font></font> </a>
    <span><img src="URL immagine" width="100" /></span>
</div>

In Google sites, questo codice, va inserito seguendo la guida: Come inserire codici e scripts in Google sites.

Come far cambiare un'immagine al passaggio del mouse:

Esempio:

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

In Google sites, questo secondo codice, va inserito seguendo Come inserire codici e scripts in Google sites.
Per Google sites esiste anche un gadget, lo potete utilizzare tramite questo indirizzo (percorso: inserisci->altri gaget->gadget in base a URL):
http://hosting.gmodules.com/ig/gadgets/file/105629041657992777031/image-mouseover.xml

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

Esempio:

I nostri visitatori, si potrebbero stancare di vedere sempre la stessa immagine, soprattutto se si tratta di un'immagine pubblicitaria. Potrebbero anche non notarla nemmeno più, se non la cambiamo, ogni tanto, ma è un bel lavoro! Che ne dite di uno script che fa cambiare l'immagine con un'altra ad ogni nuovo accesso? Non male come idea....guardate l'immagine d'esempio e ricaricate la pagina..
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.

In Google sites, questo script va inserito seguendo Come inserire codici e scripts in Google sites e impostando le misure adeguate.

Immagine con password:

Codice fornito da Sergio (grazie)..

<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>

Fonte

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.
In Google sites, questo codice va inserito seguendo la guida: Come inserire codici e scripts in Google sites.

Effetto rotazione su immagine:


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.
Su un sito Google, il codice va caricato seguendo la guida Come inserire codici e scripts in Google sites.

<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:200px;" class="rotazione" src="URL immagine"/></a>
</div>
</body>
</html>

Fonte

Bottoni che aprono e chiudono un'immagine:

Esempio:

Questo e` il codice:

<html>
<head>
<style>
#immagine
{
display:none;
width:100%;
max-width:200px;
}
</style>
</head>
<body>
<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'></img>
</body>
</html>

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.







Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in     

Ti e` stato utile questo argomento?



Continua con: Effetti sul testo