Fisheye Menu Effect in JavaScript

In this article, we will be discuss 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:

<
table cellpadding="5" cellspacing="5">
<tr>
<
td><img id="img1" src="Tulips.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show1()" /></td>
<td> <img id="img2" src="Desert.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show2()" /></td>
<td><img id="img3" src="Hydrangeas.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show3()" /></td>
<td><img id="img4" src="Jellyfish.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show4()" /></td>
<td><img id="img5" src="Koala.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show5()" /></td>
</tr>
</
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:

<script language="javascript">

    function Show2() {

        document.getElementById('img2').style.width = '150pt';

        document.getElementById('img2').style.height = '150pt';

        document.getElementById('img3').style.width = '120pt';

        document.getElementById('img3').style.height = '120pt';

        document.getElementById('img4').style.width = '100pt';

        document.getElementById('img4').style.height = '100pt';

        document.getElementById('img1').style.width = '110pt';

        document.getElementById('img1').style.height = '110pt';

        document.getElementById('img5').style.width = '100pt';

        document.getElementById('img5').style.height = '100pt';

    }

    function Show3() {

        document.getElementById('img3').style.width = '150pt';

        document.getElementById('img3').style.height = '150pt';

 

        document.getElementById('img4').style.width = '110pt';

        document.getElementById('img4').style.height = '110pt';

        document.getElementById('img2').style.width = '110pt';

        document.getElementById('img2').style.height = '110pt';

        document.getElementById('img5').style.width = '100pt';

        document.getElementById('img5').style.height = '100pt';

    }

 

 

    function Show1() {

        document.getElementById('img1').style.width = '150pt';

        document.getElementById('img1').style.height = '150pt';

        document.getElementById('img2').style.width = '110pt';

        document.getElementById('img2').style.height = '110pt';

        document.getElementById('img4').style.width = '100pt';

        document.getElementById('img4').style.height = '100pt';

        document.getElementById('img3').style.width = '100pt';

        document.getElementById('img3').style.height = '100pt';

        document.getElementById('img5').style.width = '100pt';

        document.getElementById('img5').style.height = '100pt';

    }

    function Show4() {

        document.getElementById('img1').style.width = '100pt';

        document.getElementById('img1').style.height = '100pt';

        document.getElementById('img2').style.width = '100pt';

        document.getElementById('img2').style.height = '100pt';

        document.getElementById('img4').style.width = '150pt';

        document.getElementById('img4').style.height = '150pt';

        document.getElementById('img3').style.width = '110pt';

        document.getElementById('img3').style.height = '110pt';

        document.getElementById('img5').style.width = '110pt';

        document.getElementById('img5').style.height = '110pt';

    }

    function Show5() {

        document.getElementById('img1').style.width = '100pt';

        document.getElementById('img1').style.height = '100pt';

        document.getElementById('img2').style.width = '100pt';

        document.getElementById('img2').style.height = '100pt';

        document.getElementById('img4').style.width = '110pt';

        document.getElementById('img4').style.height = '110pt';

        document.getElementById('img3').style.width = '100pt';

        document.getElementById('img3').style.height = '100pt';

        document.getElementById('img5').style.width = '150pt';

        document.getElementById('img5').style.height = '150pt';

    }

</script>

Here we set the width and height property of the image control.

Output

OutputMenuEffectJavaScript2.jpg
OutputMenuEffectJavaScript3.jpg


Complete Program
 

<html>

<head>

    <title>New Document </title>

    <script language="javascript">

        function Show2() {

            document.getElementById('img2').style.width = '150pt';

            document.getElementById('img2').style.height = '150pt';

            document.getElementById('img3').style.width = '120pt';

            document.getElementById('img3').style.height = '120pt';

            document.getElementById('img4').style.width = '100pt';

            document.getElementById('img4').style.height = '100pt';

            document.getElementById('img1').style.width = '110pt';

            document.getElementById('img1').style.height = '110pt';

            document.getElementById('img5').style.width = '100pt';

            document.getElementById('img5').style.height = '100pt';

        }

        function Show3() {

            document.getElementById('img3').style.width = '150pt';

            document.getElementById('img3').style.height = '150pt';

 

            document.getElementById('img4').style.width = '110pt';

            document.getElementById('img4').style.height = '110pt';

            document.getElementById('img2').style.width = '110pt';

            document.getElementById('img2').style.height = '110pt';

            document.getElementById('img5').style.width = '100pt';

            document.getElementById('img5').style.height = '100pt';

        }

 

 

        function Show1() {

            document.getElementById('img1').style.width = '150pt';

            document.getElementById('img1').style.height = '150pt';

            document.getElementById('img2').style.width = '110pt';

            document.getElementById('img2').style.height = '110pt';

            document.getElementById('img4').style.width = '100pt';

            document.getElementById('img4').style.height = '100pt';

            document.getElementById('img3').style.width = '100pt';

            document.getElementById('img3').style.height = '100pt';

            document.getElementById('img5').style.width = '100pt';

            document.getElementById('img5').style.height = '100pt';

        }

        function Show4() {

            document.getElementById('img1').style.width = '100pt';

            document.getElementById('img1').style.height = '100pt';

            document.getElementById('img2').style.width = '100pt';

            document.getElementById('img2').style.height = '100pt';

            document.getElementById('img4').style.width = '150pt';

            document.getElementById('img4').style.height = '150pt';

            document.getElementById('img3').style.width = '110pt';

            document.getElementById('img3').style.height = '110pt';

            document.getElementById('img5').style.width = '110pt';

            document.getElementById('img5').style.height = '110pt';

        }

        function Show5() {

            document.getElementById('img1').style.width = '100pt';

            document.getElementById('img1').style.height = '100pt';

            document.getElementById('img2').style.width = '100pt';

            document.getElementById('img2').style.height = '100pt';

            document.getElementById('img4').style.width = '110pt';

            document.getElementById('img4').style.height = '110pt';

            document.getElementById('img3').style.width = '100pt';

            document.getElementById('img3').style.height = '100pt';

            document.getElementById('img5').style.width = '150pt';

            document.getElementById('img5').style.height = '150pt';

        }

    </script>

</head>

<body>

    <br />

    <br />

    <br />

    <br />

    <br />

    <table cellpadding="5" cellspacing="5">

        <tr>

            <td>

                <img id="img1" src="Tulips.jpg" height="100pt" width="100pt" style="border: 2px solid black;"

                    onmouseover="Show1()" />

            </td>

            <td>

                <img id="img2" src="Desert.jpg" height="100pt" width="100pt" style="border: 2px solid black;"

                    onmouseover="Show2()" />

            </td>

            <td>

                <img id="img3" src="Hydrangeas.jpg" height="100pt" width="100pt" style="border: 2px solid black;"

                    onmouseover="Show3()" />

            </td>

            <td>

                <img id="img4" src="Jellyfish.jpg" height="100pt" width="100pt" style="border: 2px solid black;"

                    onmouseover="Show4()" />

            </td>

            <td>

                <img id="img5" src="Koala.jpg" height="100pt" width="100pt" style="border: 2px solid black;"

                    onmouseover="Show5()" />

            </td>

        </tr>

    </table>

</body>

</html>
 

Next Recommended Readings