Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Codes Author
Sat, 19-Apr-2014 Authors
All Time Authors
Satyapriyanayak
11600
Jayakumars
8120
Niladri.biswas
6000

Latest members | More ...


(Statistics delayed by 5 minutes)

How to Flip and Zoom the Image using JavaScript

Neeks
Posted by Neeks under JavaScript on 2/28/2009 4:34:39 AM | Views : 7707 | Status : [Member]

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>


Found interesting? Add this to:



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.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.