Mr. O'Connell's Technology Home Page

Image Project Four: Swap Image Behavior

Your goal is to create an image gallery like the example below. This gallery format allows the user to roll their mouse over the thumbnails on the right to view a full size version of the same image on the left. This allows us to present ten images in the space of two.

Carefully read and follow the directions below.

Preliminary Preparation

• Decide on a theme for your project. In the example directly above, I chose ribbon microphones.
• Your theme must be high school appropriate as Mr. O'Connell would define it. Please use your common sense. Ask Mr. O'Connell or his substitute teacher if you're not sure.
• Choose something different from your first image projects. Do not reuse images from earlier projects.
• Each image must be square.
  • The height must equal the width, as your second or third grade teacher might have mentioned. ;-)
  • Key Concepts:
    • Click here to learn more about the meaning of the word square.
    • Click here to learn more about the meaning of the word rectangle.
    • Do not download rectangles- follow the directions, and download square images!
      • (*I know all of this sounds silly, and it is. But each year, a handful of students download rectangles for this project. I just don't want you to be one of those students.)
• Each image must be directly related to your theme.
• Each image must be 300 by 300 or larger.
• Make sure the image goes right to the edge. Do not include images with "blank" edges.

  	This:		Not this:

• Use Google's Image Search to find your images. Did I mention that the images should be square?

  Rectangular images will not receive credit.

Image Preparation

This is a little bit tricky. When you are done, you will have three different versions of each image, saved in three different folders for a total of thirty images.

• Open your personal website in Dreamweaver.
• Right click your images folder, and create a new folder called fourth_ image_project_title, substituting your title for the word title. For example, my folder would be named:

  image_project_four_ribbon_mics

• Right click your new image_project_four_title folder, and create a new folder called raw.
• Right click your new image_project_four_title folder again, and create a new folder called thumbnails.
• Right click your new image_project_four_title folder again, and create a new folder called full_size.
• Save 10 square images to the raw folder.
• Rename the images. As always, make sure you name your files appropriately: lowercase letters, numbers, underscores, and periods (or "dots") only:
  • Start the file name with numbers, as per the examples below.
  • After the number, type a short, logical names that relate to your theme.
  • Examples:
    • 00_swapper.jpg (this name exact is required- see Adding Images below for more info)
    • 01_blue_woodpecker.jpg
    • 02_rea_r84.jpg
    • 03_coles_4040.jpg
    • 04_royer_sf24_hi.jpg
    • 05_mxl_r77.jpg
    • 06_shure_ksm_313.jpg
    • 07_royer_r121.jpg
    • 08_avante_cr14_14.jpg
    • 09_aea_a440.jpg
• Use Photoshop CC, resize each image:
  • Source folder: raw
  • Destination folder:full_size
  • Size:
    • Width: 300
    • Height:300
    • Resolution: 72 dpi (same as ppi)
  • Rename the files with the new size:
    • Example:
    • 01_blue_woodpecker_300x300.jpg
  • Save As the resized images in your full_size folder.
• Use Photoshop CC resize the images again:
  • Source folder: raw
  • Destination folder: thumb
  • Size:
    • Width: 100
    • Height:100
    • Resolution: 72 ppi
  • Rename the files with the new size:
    • Example:
    • 01_blue_woodpecker100x100.jpg
  • Save As the resized images in your thumb folder.

Preparing the DIV and Table

• From your personal website, open interests.html
  • This project seems to interfere with some of the code from the earlier image projects- that's why we are doing it on this page. It can be moved later.
• Click below your navigation bar and title.
• Create a new Div Tag for your project:
  • Insert<Div
  • Insert<at insertion point
  • ID: image_project_four
  • Click New CSS Rule
  • Under Rule Definition, choose This document only from the drop-down menu at the bottom of the dialog box.
  • Click Okay
  • In the CSS Rule Definition dialog box, click Background
  • Choose a contrasting background color for your Div.
  • In the CSS Rule Definition dialog box, click Box
  • In the Box dialog box, enter the following:
    • Width: 840
    • Height: 730 (you may need to adjust this later)
    • Margin (remove check mark on Same for All)
      • Left<set drop-down menu to Auto
      • Right<set drop-down menu to Auto
    • Click Okay
• Insert a new table into the image_project_four div (ctrl+alt+t).
• Configure the table as follows (see screen shot below):
  • 4 rows
  • 4 columns
  • Table Width: 600 pixel
  • Border Thickness: 0
  • Cell Padding: 0
  • Cell Spacing: 0
  
  
• Merge the top row into one cell (ctrl+alt+m).
• Merge the three cells of the far left column into one larger cell (ctrl+alt+m).
• In the top row, enter the text Image Project Four: (Theme), substituting the theme you have chosen for (Theme). For example, Image Project Four: Planets

Adding Images

Before you begin, it's important to understand the role of the swapper image. This is the first full size image the end user will see on the left side of the table. As the end user rolls their mouse over each thumbnail, this image is swapped with it's full size version. As you are creating the swap image behavior in Dreamweaver, you will need to be able to recognize the swapper in a list of images. The name 00_swapper.jpg is required for this reason.

• Drag the full size swapper image into the large cell. Make sure you fill in an alternate text name. Fill the ID swapper for the swapper image on the left. An example appears below.

• Drag each of your thumbnails into each remaining cell.
• Add both Alt text as well as a unique ID for every thumbnail, just as you did with the swapper image. Add a number to the end of the name, like this:
  • blue_01
  • rea_02
  • coles_03
  • royer_04
  • etc.

Special note: You must add a unique ID for the swapper and each of the thumbnails in order to identify the proper image in the Swap Image dialog box. Do not skip this step. In fact, don't skip any steps! ;-)

Creating the Swap Image Behavior

1. Open the Tag Inspector panel on the right side of the screen (shift+f4)
2. Make sure Behaviors is selected
3. Select the top left thumbnail
4. With the thumbnail image selected, click the plus sign in the Behaviors panel and select Swap Image.
5. In the Swap Image dialog box that opens, notice that the thumbnail's name is selected in the images list.
6. Select swapper from the Images list.
   1. Note: Students who have trouble getting the swap image behavior to work have often disregarded or misinterpreted this step. Don't be that student!
7. Click Browse to Set Source to the 300x300 version of the image, from the full_size folder. (*note: If you don't select the image from the full_size folder and you select the image from the thumbnails folder instead, your images will look blurry, and you will receive a lower grade)
8. Click Okay
9. Save the page, and then Preview (f12) to test the swap image behavior.
10. Return to Dreamweaver, and repeat these instructions for each thumbnail image.
11. Save your work.
12. Preview and test your work in Google Chrome, Firefox, Safari, and Internet Explorer.
13. Copy the Image Project Four Table
14. Open gallery.html
15. Create a new row in the Master Table, below the row that contains your content.
    • right click> Table> Insert Rows or Columns>insert one row below the selection
16. Prepare your screen for your evaluation.
    1. Have the page open in Dreamweaver, and make sure all of the files and folders related to the project are visible on the right side of the screen.
    2. Have the page open in Google Chrome, Firefox, Safari, and Internet Explorer
    3. Reread the instructions above, and ask yourself these two questions:
       1. Have I forgotten anything?
       2. Have I followed all of the instructions?
       3. Is everything done?
17. Inform the instructor that you are ready for your evaluation.

Troubleshooting

• If nothing works, select the table that holds your project, and tap the delete key on your keyboard. Start over, and make sure you have carefully read, understood, and followed every instruction. The instructions have been carefully tested by a nmany students as well as the instructor, and they work if followed carefully.
• If your swapper image fails to return after you roll off the thumbnails:
  • Select the table
  • Cut (ctrl+x)
  • Open your index.html page
  • Create a new cell in your master table
  • Paste (ctrl+v)
  • Save (ctrl+s)
  • Preview/test (f12)
• If your swapped images look blurry, it probably means you selected your images from the thumbnails folder instead of the full_size folder. To fix:
  • Select the thumbnail
  • In the Behaviors panel, double-click Swap Image
  • Move through the instructions again, starting at instruction #6