You've probably seen websites where a picture fades out, being replaced by another picture that fades in. Or maybe you've seen a picture that replaces another picture by appearing as an expanding circle inside the first picture. In this article give you some easy code to do just that!
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Picture Transition Effects

You've probably seen websites where a picture fades out, being replaced by another picture that fades in. Or maybe you've seen a picture that replaces another picture by appearing as an expanding circle inside the first picture. Wouldn't it be nice if you could use these cool effects on your own web page? In this article, I'm going to give you some easy code to do just that!

This type of effect is called a "Visual Transition". They are usually accomplished by using complicated dhtml code involving layers and clipping, but in Internet Explorer version 5.5 and higher, some of these effects have been built-in to the browser. This means that you can make them work using a small amount of easy JavaScript code.

The bad news is that this code is not W3C standard and will NOT work in browsers like Netscape Navigator, or Mozilla, or with versions of Internet Explorer before 5.5. The good news is that almost everybody is using Internet Explorer 5.5 and higher.

The first thing you'll need for this example is two images to transition between. Crop or resize the images so that they have the same width and height. In this example, I use images named flower1.jpg and flower2.jpg, both 300 x 300 pixels in dimensions.


Click on the button to start the transition effect. To use this example, right-click on each picture and select Save Picture As... in the popup menu that appears. (Reload the page to get the first picture). Then copy and paste the following code into the body of your webpage.

<img id="image1" width=300 height=300 src="flower1.jpg" style="filter:blendTrans(duration=3);"> <br><input type=button value="Start" onClick="doTransition()">
<img src="flower2.jpg" style="position:relative; width:1; height:1; visibility:hidden">

The first line in the code displays the initial picture, setting the "blendTrans" filter with a duration of three seconds. The second line provides a button to start the transition. The third line preloads the second picture, setting its style so that it is not visisble and does not take up any space on the screen (except 1 pixel).

Note that the onClick event of the button calls a function named doTransition. The entire JavaScript code for the doTransition function is shown below. Cut and paste this block of code into the head section of your webpage.

<script language=JavaScript>
function doTransition()
{
image1.filters.blendTrans.Apply();
image1.src="flower2.jpg";
image1.filters.blendTrans.Play();
}
</script>

If you don't like the button, change the code in the body of your webpage to that shown below. Now the user can click on the image itself to start the transition. Or you could call the doTransition from the onLoad event of your webpage's body tag to have the transition start automatically when the webpage loads.

<img id="image1" src="flower1.jpg" style="filter:blendTrans(duration=3)" onclick="doTrans()"><br>
Click image to start Transition.
<img src="flower2.jpg" style="position:relative; width:1; height:1; visibility:hidden">

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268