Image Project 2: Rollover Images

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 edited_images
• 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 8 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. Look carefully at the two images below, and note the difference between them.

   

  	This:

   

  	Not this:

   

   

  • 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. It doesn't work, so 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 8 images in Adobe Photoshop
  • 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 edited_images folder 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 in Part Two is to create a new DIV for your Rollover Image project. You will create a table to hold your rollover images the same method you used for Image Project One. Finally, you will add text to your new table.

NOTE: The Div for Image Project Two must be placed above the DIV for Image Project One. That way, your most recent work will be seen first.

• Open Dreamweaver
• Open your personal website
• Open gallery.html
• Create a new DIV for your Image Project Two:
  • Open gallery.html
  • Select your .css file
  • Select and copy your #image_project_one DIV  
  • Click at the end of your #main DIV, and hit Enter  twice
  • Ctrl+V to Paste 
  • Rename the DIV to #image_project_two
  • Change the height to 300px  
    • (Later, you can change the background-color to suit your project.)
  • Ctrl+S to Save
• Insert the new DIV into your Gallery page:
  • Select Source Code 
  • Click at the end of your #main DIV, and hit Enter  twice
  • Enter the following:
    • <div id="image_project_two">
      
      
    • </div>
    
    
  • Ctrl+S to Save
• Click inside the image_project_two div.
• Insert a new table (Ctrl+alt+t).
• Configure the table as follows:
  • 3 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.
  • select the four cells>Ctrl+Alt+M to Merge
• Merge the four cells in the bottom row together.
  • select the four cells>Ctrl+Alt+M to Merge
• 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.
• Format the text contained in the top and bottom rows.
  • Select the text
  • Click the Format drop-down menu in the Property Inspector
  • Select a format-use the same format you used for Project One.
• Save and Preview your work in Google Chrome (F12)

Part Three

In Part Three, no single step is difficult, but errors accumulates quickly if you skip any steps, or have previously skipped steps. When you are selecting images, the simplest solution is to pair image 01 with image 02, image _03 with image 04, and so forth. If you select images randomly, make sure you are using each image only once.

Inserting the Rollover Images:

• Open your gallery.html page in Design View.
• Click inside the far left cell of your second row.
• Insert a rollover image.
  • Insert>HTML>Rollover Image
• Follow the instructions in the dialog box.
  • Choose two images from your edited_image folder.
    • Tip: In the Browse window, set your View to Large Icons so you can see the images.
  • 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.
    • Click Okay
• Continue this process until you have 4 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.
• Spell check the page
• Save and Preview your work in Google Chrome (F12)
• Adjust and edit as needed. If your Div is either too large or too small, adjust the height in your CSS document.
• Save your work.
• You're done.

Troubleshooting Guide

• If the rollover image is too large,
  • You may have linked to the version in your raw_images folder. Redo the rollover, and this time make sure you are linking to images in the edited_images folder.
  • You may not have resized your image correctly. Open the image in Photoshop or Pixlr E. If it's not 200x200, resize it, and save it in the same folder under the same name, replacing the old image.
• 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
  • Insert it again
• In some cases, it's quicker and easier to just rebuild the table and then drag each object into it rather than stressing out 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"

If you have spacing problems, this MIGHT help:

Preparation in CSS:

Special thanks to Amanda B., OAHS Class of 2022 for coming up with this solution to a very tricky spacing problem!

• In Dreamweaver, open your CSS file

• Paste the following code into your CSS

• img {
  vertical-align: bottom;
  }

• Next change the padding of all of the CSS brackets with the label a: from 5px to 0px. You should change this in 4 places. a:link , a:active , a:hover , a:visited

Example: