WebLink il miniportale per costruire e fare pagine web

Il Sito per imparare gratuitamente a fare pagine Web
Oggi: Venerdì 10 Febbraio 2012 Ore: 06:34

Home · XHTML con Style · Primi Passi · Guida HTML · Guida CSS · F.A.Q. · Scripting · Applets · Grafica Web ·

Forum · Comunicazioni

Web-Link

Libera Donazione

180 Scripts

·Effetti sul Cursore
·Effetti sui links
·Effetti sul testo
·Effetti su immagini
·Protezioni varie
·Gestione finestre
·Animazioni
·Date e Calendari
·Orologio ed Orario
·Messaggi e frasi
·Menù navigazione
·Banners
·Scritte sulle Barre
·Decorazioni
·Utilità varie
·Cookies
·Motore Ric.Interno
·Forma o Moduli
·Reindirizzamento
·Multimedialità

Fare Web

·Applets
·Banners
·Blog
·Chat
·Contatori
·DHTML
·E-Commerce
·Editors CSS
·Editors HTML
·Flash
·Forum
·F.T.P.
·Guestbooks
·Grafica
·Iscriz.Mot.Ricerca
·Java Applets
·Java Script
·Mailling List
·Mappe Cliccabili
·Meta Tags
·Mot.ricerca interno
·Scripting
·Sondaggi on-line
·Spazi Web
·Tag Boards
·Validatori HTML
·W3C Specifiche
·Web Designer
·Web Master

Ingrandire i particolari di una piccola immagine

Crediti: Peter Gehrig and Urs Dudli
Name: info@24fun.ch
Website: www.24fun.com

Descrizione: Potrebbe essere utile e al tempo stesso molto elegante l'uso di una lente di ingrandimento per vedere meglio alcuni particolari di una immagine.

Provate a trascinare la lente sulla piccola immagine.

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

Passo 2 :

Immediatamente sotto allo style che avete appena copiato, inserite anche questa parte di codice, sempre all'interno dei tags: <head> e </head>.

<SCRIPT LANGUAGE="JavaScript"> var isNav, isIE var offsetX, offsetY var selectedObj var enlargefactor=5 var largewidth = 455 var largeheight = 523 var largeleft = 250 var largetop = 30 var thumbwidth = Math.floor(largewidth/enlargefactor) var thumbheight = Math.floor(largeheight/enlargefactor) var thumbleft = 50 var thumbtop = 30 var mglasswidth = 32 var mglassheight = 32 var mglassleft = 120 var mglasstop = 110 var difleft= largeleft-thumbleft var diftop= largetop-thumbtop var clippoints var cliptop = (thumbheight-mglassheight)*enlargefactor var clipbottom = cliptop+(mglassheight*enlargefactor) var clipleft =(thumbwidth-mglasswidth)*enlargefactor var clipright = clipleft+(mglasswidth*enlargefactor) if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true } } function setZIndex(obj, zOrder) { obj.zIndex = zOrder } function shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) } else { obj.pixelLeft = x obj.pixelTop = y } cliptop = (y-thumbtop)*enlargefactor clipbottom = cliptop+(mglassheight*enlargefactor) clipleft = (x-thumbleft)*enlargefactor clipright = clipleft+(mglasswidth*enlargefactor) if (document.all) { clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.large.style.posTop=largetop-cliptop document.all.large.style.posLeft=largeleft-clipleft document.all.large.style.clip=clippoints } if (document.layers) { document.large.top=largetop-cliptop document.large.left=largeleft-clipleft document.large.clip.left = clipleft document.large.clip.right = clipright document.large.clip.top = cliptop document.large.clip.bottom = clipbottom } } function setSelectedElem(evt) { if (isNav) { var testObj var clickX = evt.pageX var clickY = evt.pageY for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) { selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { var imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("mglass") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } selectedObj = null return } function dragIt(evt) { if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) return false } } } function engage(evt) { setSelectedElem(evt) if (selectedObj) { if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } return false } function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } function setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } } function init() { if (document.layers) { document.large.left=largeleft document.large.top=largetop document.framegif.left=largeleft-3 document.framegif.top=largetop-3 document.thumb.left=thumbleft document.thumb.top=thumbtop document.mglass.left=mglassleft document.mglass.top=mglasstop document.large.clip.left = 0 document.large.clip.right = 0 document.large.clip.top = 0 document.large.clip.bottom = 0 setNavEventCapture() } if (document.all) { document.all.large.style.posLeft=largeleft document.all.large.style.posTop=largetop document.all.framegif.style.posLeft=largeleft-3 document.all.framegif.style.posTop=largetop-3 document.all.thumb.style.posLeft=thumbleft document.all.thumb.style.posTop=thumbtop document.all.mglass.style.posLeft=mglassleft document.all.mglass.style.posTop=mglasstop document.all.large.style.clip="rect(0 0 0 0)" } document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release } </script>

Passo 3:Adesso si deve richiamare la funzione javascript che da vita all'animazione.

Selezionare tutto il codice nella finestra sotto cliccando sulla forbice, quindi posizionatevi sul testo evidenziato e adoperare il tasto destro del mouse per l'operazione di copia ed incolla, trasferitelo nella vostra pagina web, in modo che sostituisca il vostro tag: <body>

Passo 4:Non resta che la parte di codice html da posizionare all'interno del body

Selezionare tutto il codice nella finestra sotto cliccando sulla forbice, quindi posizionatevi sul testo evidenziato e adoperare il tasto destro del mouse per l'operazione di copia ed incolla, trasferitelo nella vostra pagina web, in questo caso immediatamente prima del tag:</body>

Note : Dovrete copiare le immagini :

portrait2311.jpg

frame2311.gif

mglass.gif

Per farlo è sufficiente cliccare sopra alle immagini da copiare col tasto destro del mouse, e scegliere salva immagine.
Se fate uso di una vostra immagine, come presumo :-) evitate di copiare portrait2311.jpg Rinominate la vostra immagine in modo che si chiami esattamente portrait2311.jpg, questo vi eviterà di dover modificare all'interno dello script i riferimenti all'immagine adoperata.

Elenco completo degli script.

Libera Donazione

Potete fare domande e discutere l'argomento sul Forum

Risorse

· Forum

· F.A.Q.
· Frames
· Scripting
· Applets
· Grafica Web
· Banner Exchange
· Novità

Servizi

· Web-Link Award
· I Files Scaricati
· Segnala il sito
· Leggi Guestbook
· Firma Guestbook
· Banners

Linguaggi

· A.J.A.X.
· A.S.P.
· C.G.I.
· C.S.S.
· Flash
· H.T.M.L.
· X.H.T.M.L.
· Java
· JavaScript
· P.E.R.L.
· P.H.P.
· X.M.L.

Download

· Primi Passi
· Guida HTML
· Guida CSS
· Guida XHTML

Home Page ·

Aggiungi ai preferiti ·

Segnala il sito ai tuoi amici ·

Questa pagina è esclusiva proprietà di © Web-Link © Andrea Bianchi 1997 ~ 2012
Vietata la copia e la distribuzione, anche parziale, senza la previa autorizzazione scritta di Web-Link