Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Image Project 2: Rollover Images

Image Project Two: Islamic Architecture & Art

Islamic Art 1 and 2 Khan Academy Islamic Art 3 and 4 Islamic Art 5 and 6 Islamic Art 7 and 8
Islamic Art 11 and 12 Islamic Art 9 and 10 Islamic Art 12 and 13 Islamic Art 15 and 16
Islamic Art 17 and 18 Islamic Art 19 and 20 Islamic Art 21 and 22 Islamic Art 23 and 24
Islamic Art 25 and 26 Islamic Art 27 and 28 Islamic Art 29 and 30 Islamic Art 31 and 32
Move your mouse over the images above to see more.
Gmail Web Elements Photoshop Tutorials Dictionary Shmoop Food Network Cross Stitch Patterns pbs Original project created by A. Z., OAHS Class of 2012.

Part One

  • Open your personal website.
  • Expand your image folder.
  • Create a new folder, and name it image_project_2
    • Create a sub folder, and name it raw_images.
    • Create a second sub folder (inside of your image_project_2 folder), and name it 200x200_72px
  • Decide on a theme for your second image project.
  • 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 project.
  • Choose a theme that will lend itself to square images.
    • Examples of good choices:
      • planets
      • faces
      • flowers
      • anything round or oval
      • swimming pools
      • plates
      • buttons
      • Frisbee
      • Yo Yo
    • Examples of poor choices
      • Cars
      • Full length portraits
      • Trains (from the side)
      • Anything that is rectangular to begin with
  • For this project, you must once again choose images that are SQUARE. Find 24 images 300 by 300 pixels or larger. Each image must be directly related to your theme.
    • Use Google's Advanced Image Search
      • Size>Large
      • Aspect Ratio> Square
      • file type>.JPG files (or .PNG files or .GIF)
      • Experiment with different sizes and file types in order to find more images.
    • Make sure the image goes right to the edge. Do not include images with "blank" edges.
      Not this:
        tiger-good   tiger_bad  
    • You can use .jpeg (all varieties), .gif, or .png files.
      • You can mix and match file types.
      • As you are saving and renaming files, DO NOT attempt to change the file type by merely changing the file ending. DON'T DO IT!
        • The file will be corrupted.
        • It will not open.
        • You will get an error message if you try to open it in Photoshop.
        • The conversion procedure won't work.
        • You will be wasting your time and mine.
        • DON'T DO IT!
      • Note: If you are saving a .gif file in a folder full of .jpg files, it will appear to be empty because the computer will only show you .gif files at that moment. This is true with any mix of file types.
    • To point out the obvious, if the number next to size are different from each other, you have a rectangle, and not a square. Download squares, not rectangles.
  • Save your images to your new raw_images folder, located inside of your image_project_2 folder.
  • Rename the images using our standard file naming protocols
    • Examples:
      • 01_blue_rollerskate_600x600_72px.jpg
      • 02_red_rollerskate_500x500_72px.jpg
  • Resize the 24 images in Adobe Photoshop CC (Click here for an alternatve method)
    • Open the image
    • Image< Image Size (or Ctrl+Alt+I)
    • Resolution: 72 Pixels per Inch
    • Width: 200 Pixels
    • Height: 200 Pixels
    • File<Save As (Shift+Ctrl+S)
    • Rename the image with the new size information
    • Save it in the 200x200_72px you created earlier.
  • 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.
    • It is best to use images that are square to begin with, as per the instructions.


Part Two

Your goal is to carefully read and follow the directions below. For this part of the project, I want you to work independently. Avoid asking for my help unless there is a technical problem with your computer. I want you to demonstrate your ability to read and follow the directions below in a tutorial fashion. If you run into problems, read the Troubleshooting Guide at the bottom of the page first. Then ask the students next to you to help you figure out your problem. Next, search Google for an answer using a plain language question, like this: "In Dreamweaver Creative Cloud, how do I create a rollover image?" Try several of the best looking solutions. If you still can't solve the problem, ask your instructor for help.

  • Open Dreamweaver CC
  • Open your personal website
  • Open gallery.html
  • Create a new Div Tag for your project:
    • Insert<Div
    • Insert<Before Tag
    • Choose image_project_1 from the drop down menu that appears to the right of Before Tag
    • ID: image_project_two
    • Click New CSS Rule
    • Under Rule Definition, choose This document only from the drop-down menu
    • Click Okay
    • In the CSS Rule Definition dialog box, click Box
    • In the Box dialog box, enter the following:
      • Width: 840
      • Height: 750
      • Margin (remove check mark on Same for All)
        • Left<set drop-down menu to Auto
        • Right<set drop-down menu to Auto
      • Click OK
      • Click OK In the Insert Div dialog box
  • When you return to the Gallery page, you will see your new Div,along with the words "Content for id "image_project_two" Goes Here". This is placeholder text. Leave the text in place for the moment.
  • Click to the right of the word "Here".
  • Insert a new table (ctrl+alt+t).
  • Configure the table as follows:
    • 5 rows
    • 4 columns
    • Table Width: 800 px
    • Border Thickness: 0
    • Cell Padding: 0
    • Cell Spacing: 0
  • Merge the four cells in the top row together.
  • Merge the four cells in the bottom row together.
  • Center the table
    • Right click anywhere inside your table, and chose Table>Select Table
    • Properties>Align>Center
  • In the top row, type Image Project Two: (Theme), substituting the theme you have chosen for (Theme). For example, Image Project Two: Beaches
  • In the bottom row, type Move your mouse over the images above to see more.
  • Format the background color of the top and bottom rows.
  • Click inside the left cell of your second row.
  • Insert a rollover image.
    • Insert>HTML>Rollover Image
  • Follow the instructions in the dialog box.
    • Set your view to Large Icons.
    • Choose two images from your second_image_project folder.
    • Image Name should refer to the two images you have chosen. For example, "Aruba and St. Marten Beaches". Each name must be unique.
    • Alternate Text should match your Image Names. For example, "Aruba and St. Marten Beaches". Be specific. If your theme is "Puppies", don't write "Puppies 1 and 2". Write "Golden Retriever Puppy and Husky Puppy".
      • Special note: Alternate text is important in terms of accommodating blind and vision impaired visitors to your site. For this reason, if you choose to skip this step, or rush through this step, your grade will plummet.
    • Insert a link to a website related to your images.
      • Find a website that directly relates to the rollover image.
      • Copy the URL of a website
      • Paste (Ctrl+V) the URL into the Link field.
  • Continue this process until you have 12 sets of rollover images.
  • Resize your table as needed so that there are no spaces between the rollovers, and the top row fits the text formatting you have chosen.
  • Format the text in the top row
  • Format the BG Color for the top row
  • Spell check the page
  • Select and Delete the placeholder text "Content for id "image_project_two" Goes Here"
  • Preview your work in Google Chrome (F12)
  • Adjust and edit as needed
  • Save your work.
  • You're done.

Troubleshooting Guide

  • If your image has .jpeg.jpg at the end, rename it. Take out .jpeg
  • If the rollover doesn't work, or doesn't work as expected:
    • Select the rollover image
    • Delete it
    • Put it in again
  • In some cases, it's quicker and easier to just rebuild the table and then drag each object into it rather than beating your head against the wall trying to figure out what's wrong with your existing table. Review the instructions above so that you have the correct settings.
  • Select each image, and change the border value to zero in the Property Inspector.
  • If the spacing is off on the table:
    • Select the table.
    • Look for the green drop-down menus (above or below the table).
    • Click the drop-down menus directly above the column.
    • Choose "clear column width".
    • Do this for both columns.
    • Click the drop down menu for the overall table
    • Choose "clear all widths".
    • If needed, also choose "clear all heights"



Alternative method of resizing images:

  • Open Adobe Photoshop CC
  • Close all open files
  • File>Scripts<Image Processor
  • *Note that there are four sections to this dialog box
  • In Section 1, Click "Select Folder" and set the source to your raw_images folder.
    • Computer<websites<data<navigate to your network folder
  • In Section 2, Click "Select Folder" and set the Destination to your 200x200_72px folder.
    • Computer<websites<data<navigate to your network folder
  • In Section 3, Click Save as JPEG and Resize to Fit. Fill in W: 200, H:200, Quality: 10
  • In Section 4, leave the default values
  • Click Run
  • Sit back and relax while Photoshop opens each of the 24 images, resizes them, and closes them automatically. It will take a few minutes- do not interrupt the process.
  • Sometimes, it will appear that your computer has crashed during this process. If this happens, you can always switch to Dreamweaver (use the Alt+Tab shortcut), refresh your files, and check to see if the conversion process has worked. Most often, it has. If not, give it a few minutes, and try again.
  • Photoshop will auto-generate a new folder named JPEG. Move the converted images out of this folder, and into the 200x200_72_px folder.
    • Open Dreamweaver
    • Expand the Files panel, and collapse any other panels. Make the Local Files column wide enough to see the entire contents. If you see a file ending in ..., the panel is not wide enough.
    • Navigate to the JPEG folder
    • Select all of the files inside (Ctrl+A)
    • Select the200x200_72_px folder
    • Paste your files (Ctrl+V)
    • Confirm that you have moved the files correctly
    • Delete the JPEG folder
  • Update the size information for your new files. The easiest way to do this is to select the file, hit the f2 key, and rename the file. By using the zero before numbers 1-9, Dreamweaver will display them in order. Each number should only be used once.
    • Example:
      • 01_blue_rollerskate_200x200_72px.jpg
      • 02_red_rollerskate_200x200_72px.jpg
      • 03_orange_rollerskate_200x200_72px.jpg
      • 04_purple_rollerskate_200x200_72px.jpg
      • 05_yellow_rollerskate_200x200_72px.jpg
      • 06_green_rollerskate_200x200_72px.jpg
      • 07_white_rollerskate_200x200_72px.jpg
      • 08_black_rollerskate_200x200_72px.jpg
      • 09_tan_rollerskate_200x200_72px.jpg
      • 10_gray_rollerskate_200x200_72px.jpg
      • 11_indigo_rollerskate_200x200_72px.jpg
      • ...and so forth






Mr o'cONNELL'S MUSIC PAGE dfsad dsafdsaf google