How to Flip and Zoom the Image using JavaScript

Neeks
Posted by Neeks under JavaScript category on | Views : 8972
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>


Code for the ASPX Page
<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>

Comments or Responses

Posted by: Poster on: 2/28/2009 Level:Starter | Status: [Member]
Hi Neeks,

I think this code only works in IE not in FireFox and Chrome. Do you have any such code that can work in both IE and Firefox?

Login to post response