Visualizza al passagio del mouse su miniatura

Visualizza immagine al passaggio del mouse su miniatura

Traduci questa paginaMicrosoft® Translator

Passa il Mouse all'interno della finestra per selezionare lo script quindi "CTRL+C" (copia) mettete il cursore dove volete inserire Javascript nella vostra pagina Web, andate nel codice html e fate "CTRL+V" (incolla) dove vedete il cursore lampeggiante.

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.
Facendo uso di piccole immagini ed usando come evento "onMouseover" .

Clicca sulla miniatura x vedere effetto

trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <head> e </head>.

<script type="text/javascript"> //Specify image paths and optional link (set link to "" for no link): var dynimages=new Array() dynimages[0]=["Sfondi_Javascript/photo1.jpg", "http://www.graficaugusto.org"] dynimages[1]=["Sfondi_Javascript/photo2.jpg", "http://www.graficaugusto.org"] dynimages[2]=["Sfondi_Javascript/photo3.jpg", "http://www.graficaugusto.org"] dynimages[3]=["Sfondi_Javascript/photo1Small.jpg", "http://www.graficaugusto.org"] dynimages[4]=["Sfondi_Javascript/photo2Small.jpg", "http://www.graficaugusto.org"] dynimages[5]=["Sfondi_Javascript/photo3Small.jpg", "http://www.graficaugusto.org"] //Preload images ("yes" or "no"): var preloadimg="yes" //Set optional link target to be added to all images with a link: var optlinktarget="_blank" //Set image border width var imgborderwidth=0 //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+: var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)" ///////No need to edit beyond here///// if (preloadimg=="yes"){ for (x=0; x<dynimages.length; x++){ var myimage=new Image() myimage.src=dynimages[x][0] } } function returnimgcode(theimg){ var imghtml="" if (theimg[1]!="") imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">' imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">' if (theimg[1]!="") imghtml+='</a>' return imghtml } function modifyimage(loadarea, imgindex){ if (document.getElementById){ var imgobj=document.getElementById(loadarea) if (imgobj.filters && window.createPopup){ imgobj.style.filter=filterstring imgobj.filters[0].Apply() } imgobj.innerHTML=returnimgcode(dynimages[imgindex]) if (imgobj.filters && window.createPopup) imgobj.filters[0].Play() return false } } </script>

trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <body> e </body>.

<table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="50%" align="center" bgcolor="102142"> <a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="Sfondi_Javascript/photo1Small.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br> <a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="Sfondi_Javascript/photo2Small.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br> <a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="Sfondi_Javascript/photo3Small.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td> <td width="50%" align="left" bgcolor="102142"><div id="dynloadarea" style="width:80px;height:225px"></div></td> </tr> </table>

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.

Ricordatevi che le immagini dovranno trovarsi nella stessa cartella dove avete lo script.

Le immagini sono copyright dei rispettivi proprietari