Поскольку у вас на странице загружен jQuery, но он не упомянут в вопросе, я предложу решение jQuery и не-jQuery.
jQuery:
<script type="text/javascript">
$(function() {
var bgimg = $('#bgimg');
var images = [
'/src/of/img1.jpg',
'/src/of/img2.jpg',
'/src/of/img3.jpg',
'/src/of/img4.jpg',
'/src/of/img5.jpg',
'/src/of/img6.jpg',
'/src/of/img7.jpg',
'/src/of/img8.jpg',
'/src/of/img9.jpg',
'/src/of/img10.jpg'
];
$('p.overlayimage > a').each(function( i ) {
$(this).mouseenter(function() {
bgimg.attr( 'src', images[ i ] );
});
});
});
</script>
Если вы не собираетесь использовать jQuery, измените:
<p class="overlayimage">
на:
<p id="overlayimage">
и сделайте следующее:
<script type="text/javascript">
var bgimg = document.getElementById('bgimg');
var images = [
'/src/of/img1.jpg',
'/src/of/img2.jpg',
'/src/of/img3.jpg',
'/src/of/img4.jpg',
'/src/of/img5.jpg',
'/src/of/img6.jpg',
'/src/of/img7.jpg',
'/src/of/img8.jpg',
'/src/of/img9.jpg',
'/src/of/img10.jpg'
];
var aElems = document.getElementById('overlayimage').getElementsByTagName('a'),
len = aElems.length;
function generateHandler( i ) {
return function() {
bgimg.src = images[ i ];
};
}
while( len-- ) {
aElems[ len ].onmouseover = generateHandler( i );
}
</script>
... помещая его внизу страницы, перед закрывающим тегом </body>
.