Randomize Image and Color Pair on Webpage

I'm looking to randomize a image and color pair on my webpage upon refresh. For example, when you refresh, it will show "img A" and "#999;", and next it might show "img B" and "#fff;"; basically, one image is paired with exactly one color, and that color never goes with a different image.

The tricky part is that I need the color to randomize under the css/div "a:hover{", and the image to randomize under a different id (i named it #scanner, if it helps)

So far I have this, but it isn't working. I'm not very experienced with javascript so I'm totally stuck (even though i probably just missed something very simple).

<script>

 var colors = [["#CCCCCC",     "http://ift.tt/1BxWP4E"], ["#7b9fb9",     "http://ift.tt/1CMUzZf"], ["#3df756",     "http://ift.tt/1BxWM9b"]];

  var r = Math.floor(Math.random() * 4);
  document.getElementById("scanner").innerHTML = "<font   color=\"" +     pairs[r][0] + "\"<img src=\"" + pairs[r][1] +   "\">"

  text.css('color', colors[col][0]);
  </script>



<div id="scanner">
<script>
    document.getElementById("scanner").innerHTML = "<img src = \"" +     colors[col][1] + "\">"
  </script>
  </div>