Wandering Hearts3. Add to Your Page |
|
Join the DiscussionMore of this FeatureWith the Javascript and stylesheet added into the head of our page, all that remains is to add the hearts themselves to the body of the page. The first thing we need to do is to upload the heart image to your site. You can either copy mine from this page or use your own. (If you use your own and it isn't 69 pixels wide you may need to adjust the width in the stylesheet). 
To copy the above image, right click on the image and select "Save As" from the context menu. We now add the necessary HTML into the body of our web page to include the two hearts in the page like this:
<div id="heart0"><img
src="heart.gif" width="69"
height="60" alt="heart"
/></div><div
id="heart1"><img
src="heart.gif" width="69"
height="60" alt="heart"
/></div>
It doesn't really matter where in the body of the page that you put this HTML as the hearts will move independently of the rest of the page regardless. Either directly after the <body> tag or directly before the </body> tag will be best because that way it wont get mixed up with your page content. You may need to amend the src if you have uploaded the image to a different place from the web page. Finally, if for some reason you want more than two hearts, the script is easy to change. First add extra divs to the HTML and give each its own unique id. Next update the stylesheet code to reference the extra ids and apply the same styles to them as to heart0 and heart1. Finally, update the start and moveit functions at the top of the script to define the extra hearts there. You will need to specify the id and start position when creating a new heart object within the start function and change the value assigned to the last_id field.
Introduction | The Script | Add to Your Page
|
Explore JavaScript
Must Reads
About.com Special Features
Make Meals Easy
An easy way to put delicious meals together.Build Your Business
Get tips on starting up and staying competitive.Love Your Living Space
Achieve your dream home with advice from the pros.Financial Planning
Stay on top with our smart financial tips.
©2009 About.com, a part of The New York Times Company.
All rights reserved.