Lesson 11

Multiple Images and 3D Effects

Ok, we're going to have a little fun while we learn about multiple images on a larger image.

In Lesson 9, we put an image on an image, an item on a scenic background. Our item was in an inner nested table.

Just as we can put one item in a cell in the inner table, so can we put multiple items in separate cells in the same inner table.

Get ready to do some experimenting and have a few good chuckles.

The items could be anything you want and they could all be different, but to start this lesson we will combine align & valign with different sizes of the same image to achieve a 3D effect, the illusion of depth.

Then, we'll do some fine tuning and switch out some images to get a more "artistic" final result.


3D Lab, part 1

1. Start with your table from lesson 10.
2. Copy your inner cell with your item and paste it so you have 3 cells each with your image.
3. Make your 3 images different sizes with height and width in your image tags. Make your left image the smallest, your middle image the largest, and your right image somewhere in between.
4. To make the largest image appear to be closer to you, place it low on the scene with valign.
5. To make the smallest image appear to be furthur away, place it higher on the scene.
6. Place your medium size image somewhere in between the height of the other 2 images.
7. Check your table to see how it looks so far - it's ok if it looks really goofy. Click to see my first result.
8. Now "fine tune" your image sizes and your alignment until you get a result that is acceptable to you.
9. Ask for any help you need with this part!
10. Save & post this table - no code required.

• Moving your images around
• Crop an image and use your partial image at one of the edges of your scene
• Replace some images with others
• Flip an image so it faces the other direction
• Cut back to 2 images
• Add more images (such as balloons)
• Anything else you can think of LOL
• Save this table

Homework Assignment

• Post your final table
• Show your work

Key Concepts

• To make an image appear to be further away, make it smaller & place it higher
  
• To make an image appear to be closer, make it larger & place it lower