How to Flip and Zoom the Image using JavaScript

<%--Script for the ASPX page. We have to keep this Script in our Head section of the Page--%>

    <script language="javascript" type="text/javascript">

        //This function will be used on mouse enter evert of the Image

        function fnFlp()

        {

            //Here, we are checking the condition whether we wanto Zoom or Flip the Image

            if(document.getElementById('ddl').value == 1)

                document.getElementById('img').style.zoom = '200%';

            else

                document.getElementById('img').style.filter = 'fliph';

        }

        //This function will be used on mouse out evert of the Image

        function fnFlpOut()

        {

            //Here, we are checking the condition whether we wanto Zoom or Flip the Image

            if(document.getElementById('ddl').value == 1)

                document.getElementById('img').style.zoom = '100%';

            else

                document.getElementById('img').style.filter = '';

        }

    </script>

<form id="form1" runat="server">

        <div>

            

            Example to show the Use of Image's Style [Flip and Zoom]

            <hr />

            <%--We have to keep this code in our ASPX page's Body part.--%>

            <%--Creating the DropDownList control for the Option of the Images--%>

            <asp:DropDownList runat="server" ID="ddl">

                <%--Creating Diferent options for the DropDownList--%>

                <asp:ListItem Value="0">Flip</asp:ListItem>

                <asp:ListItem Value="1">Zoom</asp:ListItem>

            </asp:DropDownList><Br />

            <%--Creating the Image for the Operation. Here we are assigning the functions fnFlp() and fnFlpOut() to

                onmouseenter and onmouseout events respectively.

            --%>

            <img id="img" src="../Image/Img/telephone.gif" onmouseenter="fnFlp()" onmouseout="fnFlpOut()" />

        </div>