Creare una Dock che al passaggio del Mouse ingrandisce.

charly

Posted on 21/11/2009, 08:50

User deleted

Innanzitutto,per il fatto che ForumFree.net ha fixato (non si possono usare,non funzionano) i codici,dovremo avere un sito a nostra disposizione,per questo vi consiglio altervista (questa guida è stata "ottimizzata" per Altervista).

Cliccate su Crea Sito,registratevi,ed accedete al pannello di controllo.In basso a sinistra troverete un pulsante Crea Cartella,cambiate il nome dell'area di testo accanto (potete scriverci quel che volete,ad esempio Dock) ed entrate in questa.

Ora,nel vostro Windows,andate su Start,Tutti i programmi,Accessori,Blocco note.Aperto il Blocco Note,copiate il codice sottostante e incollatelo:

CODICE

// LinkDock - V 1.5
// By Brian Gosselin of http://scriptasylum.com
// Release Info:
// V 1.0 - Initial release.
// V 1.1 - Minor code changes for magnification smoothness and accuracy.
// V 1.2 - Added option to include text under the links as they are hovered over.
// Fixed a magnification bug when the page is too small to fit the whole menu.
// V 1.3 - Fixed a bug where you get script errors if you hover over an image before the
// page finishes loading.
// V 1.4 - Added a tweak by RAJ to smoothen the entry into the menu.
// V 1.5 - Fixed mouse bug where the mouse wasn't tracking right when dock was wider than the
// page and the page was scrolled to the right.

// ENTER LINK ATTRIBUTES IN THE ARRAY BELOW; EACH LINE CONTAINS ALL THE
// PARAMETERS FOR ONE LINK. USE THE FOLLOWING FORMAT:
// [ 'LINK_URL' , 'IMAGE_URL' , 'URL_TARGET', 'TEXT_UNDER_LINK' ]
// VALID VALUES FOR 'URL_TARGET' ARE:
// '_blank' (NEW WINDOW)
// 'name' (THE NAME OF AN EXISTING WINDOW OR FRAME)
// '' (CURRENT PAGE)
// IF YOU DO NOT WANT TEXT DISPLAYED UNDER A LINK, SIMPLY USE AN EMPTY STRING AS THE PARAMETER FOR 'TEXT_UNDER_LINK'.

var linkList=[
[ 'javascript:alert('Javascript Alert Link')' , 'square.gif' , '', 'Javascript alert box' ],
[ 'javascript:window.print()' , 'tanbutton.gif' , '', 'Print this page...' ],
[ 'http://scriptasylum.com' , 'bluebutton.gif' , '_blank', 'ScriptAsylum.com' ],
[ '#' , 'tanglobe.gif' , '', 'Dead Link...' ],
[ '#' , 'arrow.gif' , '', 'Dead Link...' ],
[ '#' , 'uturn.gif' , '', 'Dead Link...' ],
[ '#' , 'blueglobe.gif' , '', 'Dead Link...' ],
[ '#' , 'cylinder.gif' , '', '' ],
[ '#' , 'woodbutton.gif' , '', 'Dead Link...' ],
[ '#' , 'otherarrow.gif' , '', 'Dead Link...' ],
[ '#' , 'marblebutton.gif' , '', 'Dead Link...' ]
]

// CHANGE THE OTHER VALUES BELOW TO SUIT YOUR APPLICATION

var startSize=50; // THE STARTING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
//
var endSize=100; // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
var useText=true; // true = USE TEXT UNDER THE LINK, false = NO TEXT UNDER THE LINK.
var defText='Hover over a link...' // DEFAULT TEXT TO APPEAR UNDER THE LINKS WHEN NOT HOVERED OVER.
// USE AN EMPTY STRING FOR NO TEXT.
var textGap=10; // PIXEL GAP FROM BOTTOM OF MENU TO TOP OF OPTIONAL TEXT (WHEN defText IS SET TO true).
var effectW=3.5; // THE NUMBER OF ICONS AFFECTED BY OF THE MAGNIFICATION AT ONCE (APPROXIMATE). USE VALUES BETWEEN 2 AND 5.

// BELOW IS THE STYLE-SHEET RULE FOR HOW THE TEXT IS TO BE DISPLAYED. USE VALID CSS RULES.

var textStyle="font-family:verdana; font-size:11pt; color:black; font-weight:bold";

//********** DO NOT EDIT BEYOND THIS POINT **********

var w3c=(document.getElementById)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns4=(document.layers)?true:false;
var mx=0;
var overEl=false;
var enterEl=false;
var id=0;
var elList=new Array();
var elText;
var pgLoaded=false;
if(defText=='')defText=' ';
effectW=Math.max(2,Math.min(5,effectW))+.5;
var wA=effectW*endSize/2;
var mX=wA/1.5;

function getMxy(v){
mx=(ie5||ie4)?event.clientX:v.pageX;
}

function getEl(s){
if(ns4)return findLayer(s,document);
else return (ie4)?document.all[s]:document.getElementById(s);
}

function getW(e){
return parseInt(e.style.width);
}

function setImgS(i,x){
elList[i].style.width=x;
elList[i].style.height=x;
document.images['linkDockI'+i].width=x;
document.images['linkDockI'+i].height=x;
}

function getL(el){
var x=0;
var sx=(document.all)?document.body.scrollLeft:0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
return x+el.offsetLeft-sx;
}

function rAll(){
// decrease size of zoomed images gradually
for(i=0;i<elList.length;i++) {
//"color:#888">
setImgS(i,curSize);
}}}

function dockMagnify(){
var tEl,n1,n2;
//
if(overEl){
for(i=0;i<linkList.length;i++){
tEl=elList[i];
if((getL(tEl)>=mx-wA)&&(getL(tEl)<=mx+wA)){
n1=getL(tEl)+getW(tEl)/2+10;
n2=mx-wA;
//
setImgS(i,Math.max(n1,startSize));
}else setImgS(i,startSize);
}}}

function mOver(){
overEl=true;
clearTimeout(id);
}

function mOut(){
overEl=false;
id=setTimeout('rAll()',100);
}

// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALL
function findLayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)if((layer=findLayer(name,layer.document))!=null)return layer;
}
return null;
}

function writeText(text){
if(useText && pgLoaded){
text=(text<0)?defText:linkList[text][3];
if(text=='')text=' ';
if(ns4){
elText.document.open();
elText.document.write('"color:#03C"><center><span style="'+textStyle+'">'+text+'</span></center>');
elText.document.close();
}
else elText.innerHTML=text;
}}

function writeHTML(){
var t='';
if(w3c||ie4){
t+='<table cellpadding=0 cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';
for(i=0;i<linkList.length;i++){
t+='<span id="linkDockD'+i+'" style="width:'+startSize+'px; height:'+startSize+'px;">';
t+='<a href="'+linkList[i][0]+'" target="'+linkList[i][2]+'" onmouseover="writeText('+i+')" onmouseout="writeText(-1)"><img name="linkDockI'+i+'" src="'+linkList[i][1]+'" width="'+startSize+'" height="'+startSize+'" border="none"></a>';
t+='</span>';
}
t+='</td></tr></table>';
if(useText)t+='<center><div id="dockText" style="'+textStyle+'; padding-top:'+textGap+'px">'+defText+'</div></center>';
}else{
t+='<table cellpadding=0 cellspacing=0 border=0 width="'+(linkList.length*startSize)+'"><tr valign="bottom">';
for(i=0;i<linkList.length;i++)t+='<td height="'+endSize+'"><a href="'+linkList[i][0]+'" target="'+linkList[i][2]+'" onmouseover="writeText('+i+')" onmouseout="writeText(-1)"><img src="'+linkList[i][1]+'" width="'+startSize+'" height="'+startSize+'" border="none"></a></td>';
t+='</tr>';
if(useText)t+='<tr><td colspan="'+linkList.length+'"><td height="'+textGap+'"></td></tr><tr><td colspan="'+linkList.length+'"><ilayer width="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td></tr>';
t+='</table>';
}
document.write(t);
}

window.onload=function(){
if(w3c||ie4){
for(j=0;j<linkList.length;j++){
elList[j]=getEl('linkDockD'+j);
elList[j].n=j;
elList[j].onmouseover=mOver;
elList[j].onmouseout=mOut;
}
document.onmousemove=getMxy;
setInterval('dockMagnify()',20);
}
elText=getEl('dockText');
if(ns4)writeText(-1);
pgLoaded=true;
}

writeHTML();

Ora dovrete salvarlo: cliccate su Salva con nome... ed inserite il nome che volete,vi consiglio di scriverci linkdock.js .
E' importante che il file finisca in .js

Ora,sempre con il Blocco Note,aprite un nuovo documento,e incollate il seguente codice:

CODICE

Salvate quest'ultimo codice in .html (ad esempio dock.html).

Ora,entrate nella vostra cartella di altervista che avevate precedentemente creato e cliccate su Invia Files.
Ora,inserite i 2 files che avevate creato,cliccate di nuovo su Invia Files (stavolta il bottoncino è in basso).

Ora,per vedere la dock,cliccate sul file che finisce in .html .E' il momento di "addobbarla".

Innanzitutto dovrete scegliere le icone da inserire.Di seguito vi inserisco una lista di siti dove potrete reperirle.

SPOILER (click to view)

CODICE

Ora dovrete inserirle.
Nel codice che finisce in .js,modificare la seguente parte.

SPOILER (click to view)

CODICE

Dove ho scritto ICON dovrete inserire gli URL delle icons che volete appaiano.

Modificare i links

Per modificare i links,dovrete modificare (sempre nella parte di codice che vi ho postato sopra),la parte #.

Modificare il testo che appare sotto l'icona

Per modificare il testo che appare sotto l'icona,dovrete modificare la parte Dead Links...;quando le icone sono ferme,c'è un testo di "default",precisamente la parte

CODICE

// RAJ -->
var endSize=100; // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
var useText=true; // true = USE TEXT UNDER THE LINK, false = NO TEXT UNDER THE LINK.
var defText='Hover over a link...' // DEFAULT TEXT TO APPEAR UNDER THE LINKS WHEN NOT HOVERED OVER.
// USE AN EMPTY STRING FOR NO TEXT.

Modificate la parte Hover over a link... .

Modificare le grandezze delle icone quando ci si passa il mouse e quando sono ferme

Per modificare la grandezza delle icone,modificare la parte

CODICE

// CHANGE THE OTHER VALUES BELOW TO SUIT YOUR APPLICATION

var startSize=50; // THE STARTING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
//
var endSize=100; // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
var useText=true; // true = USE TEXT UNDER THE LINK, false = NO TEXT UNDER THE LINK.

Le due parti var startSize=50 sono la grandezza delle icone ferme (ci sono due var startSize=50,quando le modificate inserite lo stesso numero).

Per modificare la grandezza delle icone al passaggio del mouse,modificate la parte var endSize=100,100 è il numero preimpostato,potete modificarlo come volete.

Il mio consiglio è che tra icona "start" ed icona "end" non ci deve essere molta differenza di grandezza,poichè verrebbero fuori sfocate.

Avete finito.
Come inserirlo nel forum

Ora arriva la parte più facile.
Credo vi sarete chiesti "ma che caspita ci facciamo se è sul sito?!?!",be',ecco come farlo apparire nel forum.
Utilizzeremo il Tag <iframe>
Di seguito il codice

CODICE

Inserire in pagina richiamata la pagina che finisce in .html .
Potete modificare i parametri height e width (cioè altezza e larghezza dell'iframe) come volete,se non volete il bordo dell'iframe.non modificate la parte frameborder="0".

0 replies since 21/11/2009, 08:50 66 views