Ms
	Blink
		Pinky

Position the following images into their place on the grid!

Ms. Pacman: Fast movement: ⇑ ⇓ ⇐ ⇒ Slow movement: ↑ ↓ ← →
Position: left=, top=

Difference between Ms. Pacman and Blinky: left=, top=

Blinky: Fast movement: ⇑ ⇓ ⇐ ⇒ Slow movement: ↑ ↓ ← →
Position: left=, top=

Difference between Blinky and Pinky: left=, top=

Pinky: Fast movement: ⇑ ⇓ ⇐ ⇒ Slow movement: ↑ ↓ ← →
Position: left=, top=

Problem Solving: Positioning an Image on Top of a Grid

Let's look at what we know:

• We can position things using style information
   
• CSS allows us to move elements out of their normal place if we use the position: relative style property, like this:
  
  <img src="Blinky" style="position: relative">
   
• We can position things precisely using the left: and top: style properties, like this:
  
  <img src="Blinky" style="position: relative; top: 46px; left: 12px;">
   
• We also know that there will be an even space between each cell on the grid.
  In the example above, this is equal to the difference measurements between each image. Let's call this the rowWidth and the columnWidth.
• We also know that the first positions in the grid don't start at zero.
  These are called offsets.
  In the example above, rowOffset =
  In the example above, columnOffset =
  

We now have enough information to create a function to calculate coordinates from row and column data!

	function outputPositionStyle (row, column) {
		var columnOffset = 		// add the offset
		var rowOffset = 		// add the offset
		var columnWidth = 		// add the width
		var rowWidth = 			// add the width
		
		var outputStyle =""; 	// this holds the style to be output

		// In our class discussion, we determined that we could calculate the positioning coordinates as follows:
		// left =columnOffset + (column * columnWidth);
		// top =rowOffset + (row * rowWidth);
		// After that, it is a matter of joining that information into outputStyle

		return outputStyle;		// outputs the style, eg: position: relative; top: 46px; left: 12px;
	}