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';
  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. }
  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';
  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. }
  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>