\documentclass{article}
\usepackage{common}
\usepackage{array}
\usetikzlibrary{arrows,shapes,backgrounds}

\begin{document}
\begin{framed}

\pagehead{Screen}

Screen RAM is a grid of 64$\times$64 bytes, each byte is a single character index.  This byte
controls the character image and palette used for that 8$\times$8 pixel cell.  The total size
of the background screen is 512$\times$512 pixels, but only 400$\times$300 pixels are visible.
The \textbf{SCROLL\_X} and \textbf{SCROLL\_Y} registers control the position of this
400$\times$300 pixel window within the larger screen area.

\begin{tikzpicture}[scale=.15]
\node [inner sep=0pt,above right]
  {\includegraphics[width=9.6cm]{mandrill-faint2.png}};
\draw[help lines] (0,0) grid (64,64);
\draw[draw=green] (7,20) rectangle (58,57.5);

\begin{scope}[opacity=0.5, transparency group]
\draw[fill=black] (0,0) rectangle (7,64);
\draw[fill=black] (58,0) rectangle (64,64);
\draw[fill=black] (7,0) rectangle (58,20);
\draw[fill=black] (7,57.5) rectangle (58,64);
\end{scope}

\draw[arrows=<->](0,65)--(7,65) node[above,xshift=-12pt] {\textbf{SCROLL\_X}};

\draw[arrows=<->](-1,64)--(-1,57.5) node[left,rotate=90,xshift=12pt,yshift=12pt] {\textbf{SCROLL\_Y}};

\end{tikzpicture}

\sample{scroll}

\end{framed}
\end{document}
