Il sito per imparare gratuitamente a fare pagine Web

JavaScript E7
















E7 - Visualizzare immagini da Links testuali o grafici.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Name: dynamicDrive.com
Website: http://www.dynamicDrive.com

Descrizione:Capita di avere dei links testuali e/o grafici e capita anche di voler associare a questi la visualizzazione di immagini che volendo possano servire da link vero e proprio, questo script č in grado di fare proprio questo, con due azioni differenti.

Lo script č molto versatile, permette infatti un preload delle immagini stesse e la possibilitą di associare il target degli eventuali links.
Questo sotto un esempio, passate il puntatore del mouse sulle immagini o fate click sulle voci descrittive per vedere l'effetto, il link si trova sulle immagini:


Facendo uso di piccole immagini ed usando come evento onMouseover:



Facendo uso di link testuali usando come evento onClick:

-Sveglia
-Dadi
-Lampadina

Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <head> e </head>.

seleziona tutto




Passo 2 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina nel punto esatto in cui deve apparire l'effetto, sempre fra i tags <body> e </body>.

seleziona tutto

Note : Ci sono dei parametri opzionali nelle prime righe di codice:

var preloadimg="no o yes" per impostare il preload delle immagini, se queste sono di un certo peso meglio impostarlo a yes

var optlinktarget="" per impostare il target dei links, se lasciato vuoto si apriranno nella stessa pagina, i parametri ammessi sono gli stessi di html: _ blank, _top, _parent

var imgborderwidth=0 per impostare lo spessore del bordo, in questo caso a zero.

var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)" I browser IE5 e superiori possono variare l'effetto Wipe gradient per dimensione e durata in secondi agendo sui valori numerici.

Cambiate il nome delle immagini photo1.jpg, photo2.jpg, ecc. ecc. con quello che avete assegnatoi alle vostre, Ricordatevi che le immagini dovranno trovarsi nella stessa cartella dove avete lo script, diversamente dovrete modificare le righe che richiamano le immagini inserendo al loro interno il path per raggiungerle.



Valutazione

Valutazione: 2.19 stelle su 5
N. Voti: (63)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.