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

Code to Fade Between Two different Pictures

You've probably seen websites where a picture fades out, being replaced by another picture that fades in. This effect is called a visual transition and it's easy to do with just a tiny bit of style and javascript code. But the first thing you need is are the html elements to hold the images in the body of your webpage, this is shown below.

<div style="position:relative; width:350px; height:350px;">
   <img id="weed" border="0" width:350px; height:350px; src="marijuana.png" />
   <img id="skull" border="0" width:350px; height:350px; src="skull.png" />

Then comes the style code. The # sign in the selectors shown below selects the elements in the code above with the id "weed" and with the id "skull". Setting their postion properties to absolute, along with setting their left and top properties to 0px places the images directly on top of one another.

position: absolute;
left: 0px;
top: 0px;
opacity: 1;
transition: opacity 3s;
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
transition: opacity 3s;

Note that the opacity property of one image is set to 1 (totally opaque) and the opacity property of the other image is set to 0 (totally transparent). The transition property is set to the property which the transition will apply to (opacity), and to the duration of the transition (3 seconds). Paste this style code block into the head section of your webpage.

Lastly, we need some JavaScript code to switch the opacity values of the two images. The code for this is shown below. First we declare a flag named vis, then we set an interval timer that calls the function myTrans every 6 seconds. (6000 milliseconds).

var vis = 0;
var myVar = setInterval(myTrans, 6000);

function myTrans()
   if(vis == 0)
      vis = 1;
      vis = 0;

function fadeWeed()
    weed.style.opacity = 0;
    skull.style.opacity = 1;

function fadeSkull()
    weed.style.opacity = 1;
    skull.style.opacity = 0;

The function myTrans has an if statement that checks the flag. If the flag is 0, it calls the fadeWeed() function and sets the flag to 1. If the flag is 1, it calls the fadeSkull() function and sets the flag to 0.

The fadeWeed() function sets the opacity of the image with the id weed to 0, and the opacity of the image with the id skull to 1. The fadeSkull() function does just the opposite, setting the opacity of the image with the id skull to 0, and the opacity of the image with the id weed to 1. The time interval for this change to take place is set to 3 seconds in the styles, so it wouldn't make sense for the interval timer to be shorter than that.

As you can see, the code to fade between two different pictures is very simple. You can easily modify the code to work with your images and your transition and interval times. This code should also be easy to modify to fade between more than two images.

More Java Script Code:
• JavaScript to Set Checkbox to Readonly
• A Cross-Browser Solution for Handling JavaScript Events
• Where Did the User Click?
• Calculators For Your Web Site : Length Units Converter
• How to Shuffle the Deck With Java Script
• Easy Java Script Form Validation
• Submit Forms Without CGI
• Easy Code for Animated Banner - Squeeze Text
• HTML5 Canvas lineCap and lineJoin Attributes
• Easy Code for Date Count Down

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

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