login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Navigatie > Mouseover menu

Mouseover menu

Auteur: Brian Gosselin - 07 oktober 2006 - 09:41 - Gekeurd door: Wijnand - Hits: 6444 - Aantal punten: 4.50 (2 stemmen)




Dit is echt een leuk menu. Je ziet gewone plaatjes en als je je muis op 1 van die plaatjes houd wordt dat plaatje groter, beweeg je opzij naar het volgende plaatje wordt die weer groter, maar het gaat wel in een vloeiende beweging!

Je hebt hier 2 bestanden voor nodig:

Menu.js
Menu.html

Code:
In Menu.html zet je het volgende tussen de <head> tags:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript" language="JavaScript" src="Menu.js"></script>

Dan maak je een nieuw bestand aan, Menu.js, en daar zet je het volgende in:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. var linkList=[
  2. [ 'Link1.html' , '1.gif' , 'blank', 'Home' ],
  3. [ 'Link2.html' , '2.gif' , 'blank', 'Raadsels' ],
  4. [ 'Link3.html' , '3.gif' , 'blank', 'Moppen' ],
  5. [ 'Link4.html' , '4.gif' , 'blank', 'Links' ],
  6. [ 'Link5.html' , '5.gif' , 'blank', 'Spellen' ],
  7. [ 'Link6.html' , '6.gif' , 'blank', 'Contact' ]
  8.  
  9.  
  10. ]
  11.  
  12. // verander hieronder de variabelen
  13. // als je de afbeelding te groot of te klein vind dan verander je var startSize=100
  14. // in een ander getal. Vind je de afbeelding te groot/ te klein bij een mouseover
  15. // dan verander je var endSize=140 in een ander getal (zo kun je bij een mouseover
  16. // ook de afbeelding kleiner later worden.
  17.  
  18. var startSize=100;  // het gewone formaat vd afbeelding.
  19. var endSize=140;   // het formaat vd afbeelding bij mouseover.
  20. var effectW=3.5;   
  21. var useText=true;  // true = tekst onder de link, false = geen tekst onder de link.
  22. var defText=' ';    // de tekst die onder de afbeeldingen komt. 
  23.                    // laat het leeg voor geen tekst.
  24.  
  25. var textStyle="font-family:verdana; font-size:11pt; color:black; font-weight:bold";
  26. var textGap=5;    
  27.  
  28. //****hieronder moet je niks aanpassen anders werkt het menu niet meer****\\
  29.  
  30.  
  31. var w3c=(document.getElementById)?true:false;
  32. var ie4=(document.all && !w3c)?true:false;
  33. var ie5=(document.all && w3c)?true:false;
  34. var ns4=(document.layers)?true:false;
  35. var mx=0;
  36. var overEl=false;
  37. var id=0;
  38. var elList=new Array();
  39. var elText;
  40. var pgLoaded=false;
  41. if(defText=='')defText='&nbsp;';
  42. effectW=Math.max(2,Math.min(5,effectW))+.5;
  43. var wA=effectW*endSize/2;
  44. var mX=wA/1.5;
  45.  
  46. function getMxy(v){
  47. mx=(ie5||ie4)?event.clientX:v.pageX;
  48. }
  49.  
  50. function getEl(s){
  51. if(ns4)return findLayer(s,document);
  52. else return (ie4)?document.all[s]:document.getElementById(s);
  53. }
  54.  
  55. function getW(e){
  56. return parseInt(e.style.width);
  57. }
  58.  
  59. function setImgS(i,x){
  60. elList[i].style.width=x;
  61. elList[i].style.height=x;
  62. document.images['linkDockI'+i].width=x;
  63. document.images['linkDockI'+i].height=x;
  64. }
  65.  
  66. function getL(el){
  67. var x=0;
  68. while(el.offsetParent!=null){
  69. x+=el.offsetLeft;
  70. el=el.offsetParent;
  71. }
  72. return x+el.offsetLeft;
  73. }
  74.  
  75. function rAll(){
  76. for(i=0;i<linkList.length;i++)setImgS(i,startSize);
  77. }
  78.  
  79. function dockMagnify(){
  80. var tEl,n1,n2;
  81. if(overEl){
  82. for(i=0;i<linkList.length;i++){
  83. tEl=elList[i];
  84. if((getL(tEl)>=mx-wA)&&(getL(tEl)<=mx+wA)){
  85. n1=getL(tEl)+getW(tEl)/2+10;
  86. n2=mx-wA;
  87. n1=(endSize*Math.sin(Math.abs(n1-n2)/mX));
  88. setImgS(i,Math.max(n1,startSize));
  89. }else setImgS(i,startSize);
  90. }}}
  91.  
  92. function mOver(){
  93. overEl=true;
  94. clearTimeout(id);
  95. }
  96.  
  97. function mOut(){
  98. overEl=false;
  99. id=setTimeout('rAll()',100);
  100. }
  101.  
  102.  
  103. function findLayer(name,doc){
  104. var i,layer;
  105. for(i=0;i<doc.layers.length;i++){
  106. layer=doc.layers[i];
  107. if(layer.name==name)return layer;
  108. if(layer.document.layers.length>0)if((layer=findLayer(name,layer.document))!=null)return layer;
  109. }
  110. return null;
  111. }
  112.  
  113. function writeText(text){
  114. if(useText && pgLoaded){
  115. text=(text<0)?defText:linkList[text][3];
  116. if(text=='')text='&nbsp;';
  117. if(ns4){
  118. elText.document.open();
  119. elText.document.write('<center><span style="'+textStyle+'">'+text+'</span></center>');
  120. elText.document.close();
  121. }
  122. else elText.innerHTML=text;
  123. }}
  124.  
  125. function writeHTML(){
  126. var t='';
  127. if(w3c||ie4){
  128. t+='<table cellpadding=0 cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';
  129. for(i=0;i<linkList.length;i++){
  130. t+='<span id="linkDockD'+i+'" style="width:'+startSize+'px; height:'+startSize+'px;">';
  131. 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>';
  132. t+='</span>';
  133. }
  134. t+='</td></tr></table>';
  135. if(useText)t+='<center><div id="dockText" style="'+textStyle+'; padding-top:'+textGap+'px">'+defText+'</div></center>';
  136. }else{
  137. t+='<table cellpadding=0 cellspacing=0 border=0 width="'+(linkList.length*startSize)+'"><tr valign="bottom">';
  138. 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>';
  139. t+='</tr>';
  140. 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>';
  141. t+='</table>';
  142. }
  143. document.write(t);
  144. }
  145.  
  146. window.onload=function(){
  147. if(w3c||ie4){
  148. for(j=0;j<linkList.length;j++){
  149. elList[j]=getEl('linkDockD'+j);
  150. elList[j].n=j;
  151. elList[j].onmouseover=mOver;
  152. elList[j].onmouseout=mOut;
  153. }
  154. document.onmousemove=getMxy;
  155. setInterval('dockMagnify()',20);
  156. }
  157. elText=getEl('dockText');
  158. if(ns4)writeText(-1);
  159. pgLoaded=true;
  160. }
  161.  
  162. writeHTML();
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (4)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.038s