Visto che sta benedetta gestione va di moda, eccoci
I rollover
Per rollover si possono intendere tutti quegli effetti che si applicano quando il mouse passa sopra
un elemento, in questo caso un immagine. Per gestire un rollover basta gestire due eventi dell'elemento, onMouseOver (quando il mouse arriva sopra l'elemento), ed onMouseOut (quando esce), ma si può tranquillamente applicare all’evento onClick (quando si clicca su di essa). Solitamente, per le immagini, si usa il rollover per cambiare l'immagine al passaggio del mouse. Ecco un esempio:
codice:
[img]prima.jpg[/img]
Questo codice è applicabile anche agli input di tipo image (<input type="image">)
Un altro tipo di rollover può essere quello che modifica le dimensioni di un immagine
codice:
[img]prima.jpg[/img]
Effettuare il submit del form tramite un immagine
E' possibile eseguire il submit di un form usando un immagine come bottone.
Basta sostituire a <input type="submit">
codice:
<input type="image" src="immagine.jpg">
Non è una vera e propria immagine, ma un input di tipo image appunto. Nel caso si volesse effettuare il submit di un form attraverso una vera e propria immagine, basta agire sull’evento onClick dell’immagine stessa
codice:
<img src=”immagine.jpg” alt=”immagine.jpg” onClick=”document.NOMEFORM.submit()” style=”cursor:hand”>
ovviamente NOMEFORM va sostituito con la proprietà name del form da inviare.
Sostituire un’immagine presente con un’altra
Può capitare ad esempio con una pagina che gestisce uno zoom su un’immagine (uno pseudo-zoom, perché non fa altro che andare a richiamare un'altra immagine), di dover cambiare un’immagine già presente con un’altra. Possiamo operare nel seguente modo
codice:
<script>
function cambia_immagine(quale,nuova){
document.images[quale].src=nuova
}
</script>
da richiamare così
codice:
<img name=”prima” src=”prima.jpg”>
<input type="button" onClick="cambia_immagine('prima','seconda.jpg')" value=”cambia immagine”>
Immagine che segue il mouse
Si chiamano mouse trailers, sono immagini (o livelli), che seguono il mouse su tutta l’area della pagina. Su internet ne esistono a centinaia, basta fare una semplice ricerca su un motore di ricerca oppure in una raccolta di script.
Per crearne uno semplice basta poco:
codice:
<script>
function cambia_pos(){
document.trailer.style.position=”absolute”
document.trailer.style.top=event.clientY+15
document.trailer.style.left=event.clientX+15
}
</script>
e
codice:
[img]0001.jpg[/img]
poiché si agisce sulle proprietà top e left, il posizionamento dell’immagine deve essere per forza assoluto (position:absolute); per questo motivo, setto tramite lo script il posizionamento assoluto. Se percaso ci dimenticassimo di settare questo tipo di posizionamento direttamente sull’immagine, lo script provvederà a farlo autonomamente. Nella funzione, setto top e left con le posizione del mouse, aggiungendo 15 pixel ad entrambe, cosicché l’immagine resti un minimo distaccata dalla freccia del mouse vera e propria.
Immagine che segue lo scorrimento della pagina
Possiamo utilizzare uno script di questo tipo per far scorrere un immagine (ma all’occorrenza un qualsiasi elemento), seguendo lo scorrimento del browser. Ciò che dobbiamo fare nello script è semplicemente settare le due variabili margineX e margineY, i margini che l’immagine manterrà rispettivamente dal bordo sinistro e dal bordo superiore della pagina.
codice:
<script>
function scorri(nome){
margineX=15;
margineY=30;
asseY=0;
asseX=0;
if(document.documentElement && document.documentElement.scrollTop){
asseY=document.documentElement.scrollTop;
asseY=document.documentElement.scrollLeft;
}
else if(document.body){
asseY=document.body.scrollTop
asseX=document.body.scrollLeft
}
document.images[nome].style.position="absolute";
document.images[nome].style.left=asseX+margineX;
document.images[nome].style.top=asseY+margineY;
}
</script>
questo script va richiamato semplicemente all’evento onScroll del body:
codice:
<body onScroll="scorri(‘NAMEIMMAGINE')">
Purtroppo funziona solo su IE.
Operazioni globali su tutte le immagini di una pagina
Sfruttando document.images, un array (vettore) indicizzato da un progressivo e contenente, nella sequenza in cui sono scritte nel codice sorgente HTML, tutte le immagini contenute nella pagina, è possibile effettuare delle operazioni globali sulle immagini.
Ridimensionamento di tutte le immagini presenti sulla pagina
Per creare una pagina ordinata, con tutte le immagini della stessa misura, basta usare un codice di questo tipo:
codice:
<script>
function ridimensiona(altezza,larghezza){
for(i=0;i<document.images.length;i++){
document.images[i].width=larghezza
document.images[i].height=altezza
}
}
</script>
che può essere richiamato in questa maniera
codice:
<input type="button" value=”Ridimensiona” onClick="ridimensiona(100,100)">
Sostanzialmente il codice sopra risulta in parte inutile, o meglio, soppiantabile dai CSS. In fase di caricamento di pagina infatti, basta un semplice CSS di questo tipo
codice:
<style>
img{heigth=100;width=100;}
</style>
Dopo il caricamento, possiamo sfruttare un’altra funzione javascript. Mentre quella precedentemente fornita agiva direttamente sulle proprietà height e width di ogni singola immagine, questa va a modificare la proprietà className di ogni singola immagine. Così facendo, è possibile cambiare in un colpo molte proprietà delle immagini, infatti basta creare una classe da applicare a seguito del richiamo della funzione
[CODE]
<style>
.inizio{heigth=100;}
.dopo{height=200;}
</style>
<script>
function cambia_classe(){
for(i=0;i<document.images.length;i++){
document.images[i].className=”dopo”
}
}
</script>
[CODE]
Settaggio di un puntatore del mouse al passaggio del mouse sopra un immagine
Volendo agire su tutte le immagini, usiamo questo CSS
[CODE]
<style>
img{cursor:hand;}
</style>
[CODE]
Volendo invece agire su una singola immagine, usiamo questo CSS (oppure settiamo una classe apposita per quest’immagine, con class=”nomeclasse”)
codice:
<img src=”immagine.jpg" alt="immagine.jpg" style="cursor=hand">
NB: questo stile è applicabile a molti altri oggetti.
Immagini a tempo
Tramite questa tecnica è possibile caricare differenti immagini in base alla data (o all'ora), presente sul computer del visitatore. Anche in questo caso la mole di script in rete è immensa, per trovare qualcosa basta cercare nelle raccolte, sui motori ecc…
Ecco comunque alcuni basilari esempi
Immagine in base al mese (giorno, ora o minuto)
codice:
<script>
oggi=new Date();
img_mesi=new Array("gen","feb","mar","apr","mag","giu","lug","ago","set","ott","nov","dic");
estensione="jpg";
document.write("<img src=\""+img_mesi[oggi.getMonth()]+"."+estensione+"\" alt=\""+img_mesi[oggi.getMonth()]+"\">");
</script>
Nell'array img_mesi sono presenti i nomi delle immagini che andranno caricate di mese in mese. ATTENZIONE: i nomi devono essere sprovvisiti di estensione.
Lo stesso script può essere utilizzato per cambiare immagine ogni giorno, basta ovviamente allungare l'array fino a 31 elementi, e indicizzarlo tramite oggi.getDate()
invece che tramite oggi.getMonth(). Indicizzandolo invece con oggi.getDay() e avendo un array di sette elementi, possiamo caricare un'immagine per ogni giorno della settimana.
Allo stesso modo possiamo agire per le ore (oggi.getHours()) e in caso di necessità anche su oggi.getMinutes() e oggi.getSeconds()
Immagini in base all’ora di giornata (notte, mattino, pomeriggio o sera)
[CODE]
<script>
notte=new Array(23,6)
mattino=new Array(7,12)
pomeriggio=new Array(13,18)
sera=new Array(19,22)
oggi=new Date()
immagini=new Array("notte.jpg","mattino.jpg","pomeriggio.jpg"," sera.jpg")
img=(oggi.getHours()>=notte[0] || oggi.getHours()<=notte[1])?immagini[0]: (oggi.getHours()>=mattino[0] && oggi.getHours()<=mattino[1])?immagini[1]
oggi.getHours()>=pomeriggio[0] && oggi.getHours()<=pomeriggio[1])?immagini[2]:immagini[3]
document.write("<img src=\""+img+"\" alt=\""+img+"\">");
</script>
[CODE]
Il settaggio di variabili si limita alle ore in cui considerare notte, mattina, pomeriggio e sera, e al settaggio dell'array con le immagini, ovviamente.
Immagini random
Per caricare un’immagine a caso tra una lista di immagini, possiamo affidarci ad uno script che, dato un array contenente dei percorso di immagini, le carichi secondo un numero casuale ricavato tramite Math.random()
[CODE]
<script>
immagini= new Array()
immagini[0]="prima.jpg"
immagini[1]="seconda.jpg"
immagini[2]="terza.jpg"
random=parseInt(Math.random()*immagini.length)
document.write("<img src=\""+immagini[random]+"\" alt=\""+immagini[random]+"\">");
</script>
[CODE]
Una versione alternativa, scritta in PHP, permette di caricare delle immagini casualmente da una cartella definita
Codice PHP:
<?
//*************** Variabili da settare ***************//
//Percorso relativo della cartella contenente le immagini
$cartella="immagini/";
//Array di tutte le estensioni valide che si vogliono caricare (bmp,gif,jpg,png)
$estensioni=array("gif","jpg","bmp");
//***************************************************//
$dir=opendir($cartella) or die("Attenzione, impossibile aprire la cartella ".$cartella);
$immagini=array();
$misure=array();
while(false !== ($file=readdir($dir))) {
$estensione=substr($file,(strlen($file)-3),strlen($file));
if(in_array($estensione,$estensioni)){
$immagini[]=$file;
$misure[]=getimagesize($cartella.$file);
}
}
if(count($immagini)==0) die("Attenzione, la cartella indicata non contiene immagini compatibili con le estensioni inserite.
Provare a controllare l'esattezza delle estensioni e della directory indicata nella variabile 'cartella'");
$indice=rand(0,(count($immagini)-1));
print "L'immagine ".$immagini[$indice]." è stata caricata a caso. Prova ad aggiornare la pagina.
";
print '[img]'.$cartella.$immagini[$indice].'[/img]';
?>
In questo script è necessario settare la cartella da dove andare a prendere le immagini, e le estensioni ca considerare valide.
Preload di immagini
Per gestire la necessità di caricare alcune immagini presenti su una pagina web prima di altre, possiamo affidarci ad uno semplice script, che inizializza delle immagini tramite l’oggetto Image(), che poi andremo a richiamare normalmente tramite HTML, e che verranno caricate prima delle altre
codice:
<script>
immagini=new Array()
immagini[0]="prima.jpg";
immagini[1]="cartella/seconda.bmp";
immagini[2]="../terza.gif";
arr_img=new Array()
for(i=0;i<immagini.length;i++){
arr_img[i]=new Image()
arr_img[i].src=immagini[i]
}
</script>
Il settaggio dell’utente si limita ai valori dell’array immagini, che appunto contiene il percorso relativo di tutte le immagini da precaricare.
NB: esiste un’altra proprietà dell’oggetto Image, complete, che risulta essere utile qualora interessi controllare se una determinata immagine è già stata completamente caricata o meno. La proprietà può assumere un valore booleano, true se l’immagine è stata caricata completamente (completa appunto), false altrimenti.
Controllo stato di raggiungibilità di un server
In un caso remoto, potrebbe essere utile sapere se un server esterno a quello del nostro sito è attivo o meno, per fare ciò possiamo utilizzare un metodo, per la verità poco ortodosso, ma abbastanza versatile, che ci offre la gestione dell'evento onError su un’immagine presente nelle directory del server da controllare. Questa tecnica è anche utilizzabile per caricare qualcosa di alternativo, nel caso l'immagine non fosse visualizzabile.
codice:
[img]www.sito.it/immagine.jpg[/img]
per esempio, possiamo far si che un'immagine si nasconda da sola in caso non fosse raggiungibile, o si verifichi comunque un errore:
codice:
[img]www.sito.it/immagine.jpg[/img]
BYE!
Rispondi quotando
