Full version: jsB@nk » Image » Vertical LinkDock
URL: https://www.javascriptbank.com/link-dock-vlinkdock.html
The effect makes the images which are sorted with vertical and they'll enlarge when user move mouse on it.
Full version: jsB@nk » Image » Vertical LinkDock
URL: https://www.javascriptbank.com/link-dock-vlinkdock.html
<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 APPLICATIONvar 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=' ';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 HALLfunction 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=' ';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-->http://javascriptbank.com/javascript/image/Link_Dock/Link_Dock_images.zip