Photoshop 5.5 Tutorials
Tip #13: Interface Mouseover Effect.
We are going to go over the steps to make the interface we created in Tutorial 11 interactive, it will react to your mouse cursor and switch the images to make it seem interactive and cool.
Each step has an image to show you how your project should look after each one. All actions are in italics and a green font so you know when you should be doing something.
|
Figure 1 |
STEP 1 
Open the web page you created in tutorial 12 or if you are just starting open the Web page with the interface you want to add this effect to.
You need to be viewing the source code and will need all the up and down images for your interface before continuing with this step. If you don't have any images or don't know how to make them go to Tutorial 11 and then come back here when ready.
Once you get started you will see something like figure 1, it is the beginning of our HTML document. It has all the upstate images and is ready to have JAVA Script added to it.
|
|
Figure 2 |
STEP 2 
OK, first we need to put the Java Script within the HEAD tag. Copy the code below and paste it into the HEAD tag of your HTML document.
JAVA Script code for the HEAD tag.
You should now have something that looks like figure 2.
• Save your work!
|
|
Figure 3 |
STEP 3
OK, now you need to copy and paste the code below for the preload images script. This makes the image swapping very fast, it pre-loads the down-state images into the users cache. Copy and paste the code below and paste it right under the previous Java script code within your HEAD tag.
It should look like figure 3.
|
|
Figure 4
|
STEP 4 
Now we just add the down-state images to the pre load Java Script. Change each image that is their to match your directory and image name. In my case I changed them to but1dn, but2dn, etc... You can add as many images as you need, but make sure the last image in the pre-load script doesn't have the , (coma) after it. Look at figure 4 and you will see what I mean.
You should now have some code that looks like figure 4.
• Save your work!
|
|
Figure 5a
Figure 5b
|
STEP 5 
Now we need to put in the image swapping code. This is the part that adds the mouse over effect. Copy and paste the code below into your HTML document. Paste it right above your first button image. Do not replace the old image code yet.
Figure 5a will show you how your document should look after you paste this code into it.
Now change the msover part to the code to the down-state image and the msout part to the up-state image. It will look like figure 5b once done. You will also need to make the last image source code to the up-sate image.
Make sure you pay attention to the Image Name, it controls the mouseover effect for each image. On each image the Image Name will be different, so they will be like a1, a2, a3, etc.. And always start the image name with a letter followed by a number, other wise you will run into problems.
Continue step 5 until all buttons are switched with the new Java mouseover code.
|
|
|
|
STEP 6 
OK, your done with this tutorial. You should have a complete interactive interface now and be able to create your own with a better understanding of this stuff.
• Our interface is to the left in full action.
|
|
Please rate this tip below.
1 represents poor and 10 is excellent.
|
|
