Search
Submit & Win
Submit and win
Cash Prizes !
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Codes Author
Sun, 21-Dec-2014 Authors
All Time Authors
Satyapriyanayak
12160
Vishal@Neeraj
10880
Jayakumars
8120

Latest members | More ...


(Statistics delayed by 5 minutes)
 Codes

How to Flip and Zoom the Image using JavaScript

Neeks
Posted by Neeks under JavaScript on 2/28/2009 4:34:39 AM | Views : 8263 | 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>


Share this to:

Bookmark It

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