I'm trying to use rollover images on our homepage, but can't get them to work.
I hope someone can shed some light on what I did wrong and what I should do to make them work.
If any additional information is needed, please let me know.

Here's what I did.

I added in HTML header inserts:

<!-- js code voor rollover images -->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Then I added to HTML inserts body tag the secondary images that need to be preloaded (actually I just want them to be preloaded on the hompeage and not on the other pages, but I'm guessing that's problem #2):

onload="MM_preloadImages('http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-1-sec-copy.jpg','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-2-sec-copy.jpg','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-3-sec-copy.jpg','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-4-sec-copy.jpg')"

And then I put on our homepage the following code:

<!-- ROW 1 -->
<div id="ROW1" style="width:600px; height:10px; clear:both">
</div>

<!-- ROW 2 -->
<div id="R2C1" style="width:100px; height:200px; float:left">
</div>
<div id="R2C2" style="width:200px; height:200px; float:left"><a href="http://www.marktmonitor.com/wordpress/innovatie/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding1','','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-1-sec-copy.jpg',1)"><img src="http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-1-pri-copy.jpg" alt="alt tekst" name="Afbeelding1" width="200" height="200" border="0" id="Afbeelding1" /></a>
</div>
<div id="R2C3" style="width:25px; height:200px; float:left">
</div>
<div id="R2C4" style="width:200px; height:200px; float:left"><a href="http://www.marktmonitor.com/wordpress/arbeidsmarkt" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding1','','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-2-sec-copy.jpg',1)"><img src="http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-2-pri-copy.jpg" alt="alt tekst" name="Afbeelding1" width="200" height="200" border="0" id="Afbeelding1" /></a>
</div>
<div id="R2C5" style="width:75px; height:200px; float:left">
</div>

<!-- ROW 3 -->
<div id="ROW3" style="width:600px; height:25px; clear:both"> 
</div>

<!-- ROW 4 -->
<div id="R4C1" style="width:100px; height:200px; float:left">
</div>
<div id="R4C2" style="width:200px; height:200px; float:left"><a href="http://www.marktmonitor.com/wordpress/onderwijs/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding1','','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-3-sec-copy.jpg',1)"><img src="http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-3-pri-copy.jpg" alt="alt tekst" name="Afbeelding1" width="200" height="200" border="0" id="Afbeelding1" /></a>
</div>
<div id="R4C3" style="width:25px; height:200px; float:left">
</div>
<div id="R4C4" style="width:200px; height:200px; float:left"><a href="http://www.marktmonitor.com/wordpress/regiomonitor/ " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding1','','http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-4-sec-copy.jpg',1)"><img src="http://www.marktmonitor.com/wordpress/wp-content/uploads/2012/10/image-4-pri-copy.jpg" alt="alt tekst" name="Afbeelding1" width="200" height="200" border="0" id="Afbeelding1" /></a>
</div>
<div id="R4C5" style="width:75px; height:200px; float:left">
</div>

<!-- ROW 5 -->
<div id="ROW5" style="width:600px; height:10px; clear:both">
</div>

This has nothing to due with the theme, you might want to ask this over at wordpress.org