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!
Maintain Your Computer and Use it More Effectively to Design a Web Site and Make Money on the Web
HTML5 brings the biggest changes to HTML in years. Web designers
now have new techniques, from displaying video and audio natively in HTML,
to creating realtime graphics on a web page without a plugin.
This book provides a collection of solutions to all of the most common HTML5 problems.
Every solution contains sample code that is production-ready and can be applied to any project.
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.
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.
Eloquent JavaScript Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books
and teaches you to write code that's elegant and effective. You'll start with the basics of programming,
and learn to use variables, control structures, functions, and data structures. Then you'll dive
into the real JavaScript artistry: higher-order functions, closures, and object-oriented programming.
Reader Anthony says, "This book is not your typical Javascript book. Others have a utilitarian approach. In stark contrast,
Eloquent JavaScript does not merely provide you a checklist of things to learn but rather paints
a panorama of the possibilities that programming provides. Javascript is merely the tool used to introduce these to the reader.
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads
RSS Feed
