Chapter 12 - Making an Interactive Page



Making an Interactive Site

In this chapter, we will learn how to make your site more interactive. This may mean adding mouse roll-overs, or having members enter their name at a prompt so when the page loads, it says "Welcome Theirname". Use these effects sparingly though, because they could increase load time. I will first start with a roll-over.

To make image roll-overs we will use JavaScript. An image roll-over is a script that says: when a mouse goes over an image, that image will be replaced with another image. We can also set it to return to the original image when the mouse leaves the image. To do this, you need to create two images - the original one, and the depressed one. I will name mine home.gif, and home_roll.gif. To make the roll-over look realistic, we need to preload the button so it will load faster. Type this within the head tags. 

<script language="Javascript1.1">


//preload images
home = new Image(97,30);  //home
home.src = "home.gif";

home_roll = new Image(97,30);
home_roll.src = "home_roll.gif";

</script>

Now we need to place the link on the page. Enter this inside the body tags. 

<A HREF="index.html" onMouseOver="document.button.src=home_roll.src " onMouseOut=
"document.button.src=home.src ">
	<IMG SRC="home.gif" WIDTH="100" HEIGHT="29" border="0"
	name="button" alt="Zimmer Tech Home"></a>

You can do this for any number of images, but make sure the name of the image is different from the name of the preloaded images. For a more indepth tutorial on image roll-overs, go here. Now that we have made out page more interactive, lets go over the commandments of web design.



< Previous Page | Index

Rate this Tutorial

Rate this Tutorial:

Current Rating:

4.5 out of 54.88/ 5.00 with 8 votes.

Current Comments

2 comments so far (post your own)

I've been searching for a template tutorials in many places, I found some but they all use Photoshop, this one uses PSP which is cool, Thankyou for this great tutorial, another useful information about templates.. :)

Posted by Kikki (-)on Friday, 01.28.05 @ 07:05am | #346

i am worried about my result.
kindly anounced the result of M.Sc Part-II Annual Examination 2006

Posted by Muhammad Irfan (www.pu.edu.pk)on Thursday, 04.12.07 @ 10:51pm | #2840

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:
 
Guess the letters and numbers (passphrase riddle) -- 2 chars before small E & 1 chars before L and 3 chars before small P and not a "T", but /5/ - 'U' ; (??? - 5) = -1 ; '5' and then → retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.
 

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.