Reader Level:
Article

Fisheye Menu Effect in JavaScript

By Mahak Gupta on Aug 28, 2012
In this article, we will be discuss the 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>
 

Mahak Gupta

My name is Mahak Gupta. I am a C# Corner MVP.

COMMENT USING