« »

The effect makes the images which are sorted with vertical and they'll enlarge when user move mouse on it.

Label: Vertical LinkDock,

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
Print

Link_Dock_images.zip

Copy All x2

<script language="javascript">
// VLinkDock - V 1.0
// By Brian Gosselin
// Release Info:
// V 1.0 - Initial release.

// 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' , '', 'JS ALERT BOX' ],
[ 'javascript:window.print()' , 'tanbutton.gif' , '', 'PRINT THIS PAGE' ],
[ 'http://JavaScriptBank.com' , '../logojs.gif' , '_blank', 'JavaScriptBank.com' ],
[ '#' , 'uturn.gif' , '', 'DEAD LINK 1' ],
[ '#' , 'blueglobe.gif' , '', 'DEAD LINK 2' ],
[ '#' , 'cylinder.gif' , '', '' ],
[ '#' , 'woodbutton.gif' , '', 'DEAD LINK 3' ],
[ '#' , 'otherarrow.gif' , '', 'DEAD LINK 4' ],
[ '#' , 'marblebutton.gif' , '', 'DEAD LINK 5' ]
]

// CHANGE THE OTHER VALUES BELOW TO SUIT YOUR APPLICATION

var startSize=35;  // THE STARTING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
var endSize=90;   // THE ENDING WIDTH *AND* HEIGHT OF EACH IMAGE (THE IMAGES WILL BE SCALED).
var useText=true;  // true = USE TEXT RIGHT OF THE LINK, false = NO TEXT RIGHT OF THE LINK.
var defText='HOVER OVER A LINK'  // DEFAULT TEXT TO APPEAR TO THE RIGHT OF THE LINKS WHEN NOT HOVERED OVER.
                                    // USE AN EMPTY STRING FOR NO TEXT.
var textGap=10;    // PIXEL GAP ON EACH SIDE OF THE 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:10pt; 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 my=0;
var overEl=false;
var id=0;
var elList=new Array();
var elText;
var pgLoaded=false;
if(defText=='')defText='&nbsp;';
effectW=Math.max(2,Math.min(5,effectW))+.5;
var wA=effectW*endSize/2;
var mX=wA/1.5;

function getMxy(v){
my=(ie5||ie4)?event.clientY+document.body.scrollTop:v.pageY;
}

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

function getH(e){
return parseInt(e.style.height);
}

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

function getT(el){
var y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
return y+el.offsetTop;
}

function rAll(){
for(i=0;i<linkList.length;i++)setImgS(i,startSize);
}

function dockMagnify(){
var tEl,n1,n2;
if(overEl){
for(i=0;i<linkList.length;i++){
tEl=elList[i];
if((getT(tEl)>=my-wA)&&(getT(tEl)<=my+wA)){
n1=getT(tEl)+getH(tEl)/2+10;
n2=my-wA;
n1=(endSize*Math.sin(Math.abs(n1-n2)/mX));
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 formatText(text){
var ta;
if(text=='')text='&nbsp;';
else{
ta=text.split('');
text='';
for(i=0;i<ta.length;i++){
if(i<ta.length-1)text+=ta[i]+'<br>';
else text+=ta[i];
}}
return text;
}

function writeText(text){
if(useText && pgLoaded){
text=(text<0)?defText:linkList[text][3];
text=formatText(text);
if(ns4){
elText.document.open();
elText.document.write('<table cellpadding=0 cellspacing=0 border=0 height="'+(linkList.length*startSize)+'" width="'+((textGap*2)+20)+'"><tr valign="middle"><td align="center"><span style="'+textStyle+'">'+text+'</span></td></tr></table>');
elText.document.close();
}
else elText.innerHTML=text;
}}

function writeHTML(){
var t='';
if(w3c||ie4){
t+='<table cellpadding=0 cellspacing=0 border=0 height="'+(((linkList.length-4)*startSize)+(4*endSize))+'" width="'+((useText)?endSize+(textGap*2+20):endSize)+'"><tr valign="middle" align="center"><td width="'+endSize+'">';
for(i=0;i<linkList.length;i++){
t+='<div 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+='</div>';
}
t+='</td>';
if(useText)t+='<td align="center" width="'+((textGap*2)+20)+'"><div id="dockText" style="'+textStyle+'">'+formatText(defText)+'</div></td>';
t+='</tr></table>';
}else{
t+='<table cellpadding=0 cellspacing=0 border=0 width="'+((useText)?startSize+(textGap*2+20):startSize)+'" height="'+(linkList.length*startSize)+'"><tr><td width="'+startSize+'" valign="middle" align="center">';
for(i=0;i<linkList.length;i++)t+='<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><br>';
t+='</td>';
if(useText)t+='<td align="center" width="'+((textGap*2)+20)+'"><ilayer width="'+((textGap*2)+20)+'" height="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td>';
t+='</tr></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');
pgLoaded=true;
if(ns4)writeText(-1);
}

writeHTML();
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->