Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 19-11-2009
Member
 
Join Date: Jan 2009
Posts: 35
html program to create image flip

I have to write the html program for image flip. In am describing what I want to display. I want image to change when cursor is over the picture and when the mouse come out this image, the image flip back.

How can we achieve this output? Please give solution with HTML code.
Reply With Quote
  #2  
Old 19-11-2009
Member
 
Join Date: May 2008
Posts: 2,008
Re: html program to create image flip

Hi friend,

I don't no the exact coding but we can create image flip in HTML using Javascript. To achieve this you will have to use event concept. I think something like mouseOver() events may helpful in this.Fire the events code for position of the mouse and the area of the image which you want to flip.

I hope this hints may help you code this program successfully.
Reply With Quote
  #3  
Old 19-11-2009
Member
 
Join Date: Apr 2008
Posts: 2,001
Re: html program to create image flip

I have successfully run this program to create image flip on my pc. Below is the code for that program

program code:

Quote:
<SCRIPT language="JavaScript">
<!--

if (document.images)
{
pic1on= new Image(100,25);
pic1on.src="ses2.gif";

pic1off= new Image(100,25);
pic1off.src="ses1.gif";
}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}

//-->
</SCRIPT>
Include this coding in the body:

Quote:
<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="http://forums.techarena.in/images/ses1.gif" name="pic1" width="100" height="25" border="0"></A>

Last edited by kelfro : 19-11-2009 at 01:42 PM.
Reply With Quote
  #4  
Old 19-11-2009
Member
 
Join Date: May 2008
Posts: 2,293
Re: html program to create image flip

To make image flip program using html use below hints

To change image when mouse is over the image use below code:

Quote:
function flipon(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
To change image when mouse is out of the image area use below code:

Quote:
function turnoff(imgName)
{
if (document.images)
{
imgOut=eval(imgName + "off.src");
document[imgName].src= imgOut;
}
}
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "html program to create image flip"
Thread Thread Starter Forum Replies Last Post
Is it possible to create a page flip book from PDF files. Ardiana Windows Software 6 27-12-2011 02:19 PM
Image Flip Book Viewer Indrani Windows Software 2 24-06-2009 08:40 PM
How to create Image Rollovers in HTML Daniel craig Software Development 3 14-05-2009 11:59 AM
Create a desktop shortcut for 3D Aero Flip Baker Customize Desktop 3 28-03-2009 10:28 AM
how do i make a flip(negative)image of picture shivinder MS Office Support 1 07-10-2008 04:53 PM


All times are GMT +5.5. The time now is 03:45 AM.