Position the following images into their place on the grid!

Ms. Pacman:
```<img src="MsPacMan.png" style="top: px; left: px;">```

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

```<img src="Blinky.png" style="top: px; left: px;">```

Difference between Blinky and Pinky: top=px, left=px

Pinky:
```<img src="Pinky.png" style="top: px; left: px;">```

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: absolute` style property, like this:

`<img src="Blinky" style="position: absolute">`

• We can position things precisely using the `left: ` and `top: ` style properties, like this:

`<img src="Blinky" style="position: absolute; 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;
}
``````