Post
Ask Question

Fisheye Menu Effect in JavaScript

Introduction

 
In this article, we will be discussing the Fisheye menu effect in JavaScript. For this follow these steps: 
 
Step 1: First we create a table and use five images in it like this:
  1. <table cellpadding="5" cellspacing="5">  
  2. <tr>  
  3. <td><img id="img1" src="Tulips.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show1()" /></td>  
  4. <td> <img id="img2" src="Desert.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show2()" /></td>  
  5. <td><img id="img3" src="Hydrangeas.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show3()" /></td>  
  6. <td><img id="img4" src="Jellyfish.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show4()" /></td>  
  7. <td><img id="img5" src="Koala.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show5()" /></td>  
  8. </tr>  
  9. </table> 
Output
 
OutputMenuEffectJavaScript1.jpg
 
Step 2: In the previous step we call the JavaScript functions, so now we will write the JavaScript functions like this:
  1. <script language="javascript">  
  2.     function Show2() {  
  3.         document.getElementById('img2').style.width = '150pt';  
  4.         document.getElementById('img2').style.height = '150pt';  
  5.         document.getElementById('img3').style.width = '120pt';  
  6.         document.getElementById('img3').style.height = '120pt';  
  7.         document.getElementById('img4').style.width = '100pt';  
  8.         document.getElementById('img4').style.height = '100pt';  
  9.         document.getElementById('img1').style.width = '110pt';  
  10.         document.getElementById('img1').style.height = '110pt';  
  11.         document.getElementById('img5').style.width = '100pt';  
  12.         document.getElementById('img5').style.height = '100pt';  
  13.     }  
  14.     function Show3() {  
  15.         document.getElementById('img3').style.width = '150pt';  
  16.         document.getElementById('img3').style.height = '150pt';  
  17.    
  18.         document.getElementById('img4').style.width = '110pt';  
  19.         document.getElementById('img4').style.height = '110pt';  
  20.         document.getElementById('img2').style.width = '110pt';  
  21.         document.getElementById('img2').style.height = '110pt';  
  22.         document.getElementById('img5').style.width = '100pt';  
  23.         document.getElementById('img5').style.height = '100pt';  
  24.     }  
  25.    
  26.    
  27.     function Show1() {  
  28.         document.getElementById('img1').style.width = '150pt';  
  29.         document.getElementById('img1').style.height = '150pt';  
  30.         document.getElementById('img2').style.width = '110pt';  
  31.         document.getElementById('img2').style.height = '110pt';  
  32.         document.getElementById('img4').style.width = '100pt';  
  33.         document.getElementById('img4').style.height = '100pt';  
  34.         document.getElementById('img3').style.width = '100pt';  
  35.         document.getElementById('img3').style.height = '100pt';  
  36.         document.getElementById('img5').style.width = '100pt';  
  37.         document.getElementById('img5').style.height = '100pt';  
  38.     }  
  39.     function Show4() {  
  40.         document.getElementById('img1').style.width = '100pt';  
  41.         document.getElementById('img1').style.height = '100pt';  
  42.         document.getElementById('img2').style.width = '100pt';  
  43.         document.getElementById('img2').style.height = '100pt';  
  44.         document.getElementById('img4').style.width = '150pt';  
  45.         document.getElementById('img4').style.height = '150pt';  
  46.         document.getElementById('img3').style.width = '110pt';  
  47.         document.getElementById('img3').style.height = '110pt';  
  48.         document.getElementById('img5').style.width = '110pt';  
  49.         document.getElementById('img5').style.height = '110pt';  
  50.     }  
  51.     function Show5() {  
  52.         document.getElementById('img1').style.width = '100pt';  
  53.         document.getElementById('img1').style.height = '100pt';  
  54.         document.getElementById('img2').style.width = '100pt';  
  55.         document.getElementById('img2').style.height = '100pt';  
  56.         document.getElementById('img4').style.width = '110pt';  
  57.         document.getElementById('img4').style.height = '110pt';  
  58.         document.getElementById('img3').style.width = '100pt';  
  59.         document.getElementById('img3').style.height = '100pt';  
  60.         document.getElementById('img5').style.width = '150pt';  
  61.         document.getElementById('img5').style.height = '150pt';  
  62.     }  
  63. </script> 
Here we set the width and height property of the image control.
 
Output
 
OutputMenuEffectJavaScript2.jpg
 
OutputMenuEffectJavaScript3.jpg
 
Complete Program
  1. <html>  
  2. <head>  
  3.     <title>New Document </title>  
  4.     <script language="javascript">  
  5.         function Show2() {  
  6.             document.getElementById('img2').style.width = '150pt';  
  7.             document.getElementById('img2').style.height = '150pt';  
  8.             document.getElementById('img3').style.width = '120pt';  
  9.             document.getElementById('img3').style.height = '120pt';  
  10.             document.getElementById('img4').style.width = '100pt';  
  11.             document.getElementById('img4').style.height = '100pt';  
  12.             document.getElementById('img1').style.width = '110pt';  
  13.             document.getElementById('img1').style.height = '110pt';  
  14.             document.getElementById('img5').style.width = '100pt';  
  15.             document.getElementById('img5').style.height = '100pt';  
  16.         }  
  17.         function Show3() {  
  18.             document.getElementById('img3').style.width = '150pt';  
  19.             document.getElementById('img3').style.height = '150pt';  
  20.    
  21.             document.getElementById('img4').style.width = '110pt';  
  22.             document.getElementById('img4').style.height = '110pt';  
  23.             document.getElementById('img2').style.width = '110pt';  
  24.             document.getElementById('img2').style.height = '110pt';  
  25.             document.getElementById('img5').style.width = '100pt';  
  26.             document.getElementById('img5').style.height = '100pt';  
  27.         }  
  28.    
  29.    
  30.         function Show1() {  
  31.             document.getElementById('img1').style.width = '150pt';  
  32.             document.getElementById('img1').style.height = '150pt';  
  33.             document.getElementById('img2').style.width = '110pt';  
  34.             document.getElementById('img2').style.height = '110pt';  
  35.             document.getElementById('img4').style.width = '100pt';  
  36.             document.getElementById('img4').style.height = '100pt';  
  37.             document.getElementById('img3').style.width = '100pt';  
  38.             document.getElementById('img3').style.height = '100pt';  
  39.             document.getElementById('img5').style.width = '100pt';  
  40.             document.getElementById('img5').style.height = '100pt';  
  41.         }  
  42.         function Show4() {  
  43.             document.getElementById('img1').style.width = '100pt';  
  44.             document.getElementById('img1').style.height = '100pt';  
  45.             document.getElementById('img2').style.width = '100pt';  
  46.             document.getElementById('img2').style.height = '100pt';  
  47.             document.getElementById('img4').style.width = '150pt';  
  48.             document.getElementById('img4').style.height = '150pt';  
  49.             document.getElementById('img3').style.width = '110pt';  
  50.             document.getElementById('img3').style.height = '110pt';  
  51.             document.getElementById('img5').style.width = '110pt';  
  52.             document.getElementById('img5').style.height = '110pt';  
  53.         }  
  54.         function Show5() {  
  55.             document.getElementById('img1').style.width = '100pt';  
  56.             document.getElementById('img1').style.height = '100pt';  
  57.             document.getElementById('img2').style.width = '100pt';  
  58.             document.getElementById('img2').style.height = '100pt';  
  59.             document.getElementById('img4').style.width = '110pt';  
  60.             document.getElementById('img4').style.height = '110pt';  
  61.             document.getElementById('img3').style.width = '100pt';  
  62.             document.getElementById('img3').style.height = '100pt';  
  63.             document.getElementById('img5').style.width = '150pt';  
  64.             document.getElementById('img5').style.height = '150pt';  
  65.         }  
  66.     </script>  
  67. </head>  
  68. <body>  
  69.     <br />  
  70.     <br />  
  71.     <br />  
  72.     <br />  
  73.     <br />  
  74.     <table cellpadding="5" cellspacing="5">  
  75.         <tr>  
  76.             <td>  
  77.                 <img id="img1" src="Tulips.jpg" height="100pt" width="100pt" style="border: 2px solid black;"  
  78.                     onmouseover="Show1()" />  
  79.             </td>  
  80.             <td>  
  81.                 <img id="img2" src="Desert.jpg" height="100pt" width="100pt" style="border: 2px solid black;"  
  82.                     onmouseover="Show2()" />  
  83.             </td>  
  84.             <td>  
  85.                 <img id="img3" src="Hydrangeas.jpg" height="100pt" width="100pt" style="border: 2px solid black;"  
  86.                     onmouseover="Show3()" />  
  87.             </td>  
  88.             <td>  
  89.                 <img id="img4" src="Jellyfish.jpg" height="100pt" width="100pt" style="border: 2px solid black;"  
  90.                     onmouseover="Show4()" />  
  91.             </td>  
  92.             <td>  
  93.                 <img id="img5" src="Koala.jpg" height="100pt" width="100pt" style="border: 2px solid black;"  
  94.                     onmouseover="Show5()" />  
  95.             </td>  
  96.         </tr>  
  97.     </table>  
  98. </body>  
  99. </html>  


Similar Articles