Need assistance with the following:

The main page is divided into 2 columns; one category list, and second an iamge tag. Now i have 5 categories and each category has some set of distinct images. The first time page shows up i want to show my category 1 (which is also a main category) image (out of group of main category images). when mouse is over a category an iamge (distinct) from that category should show up.

I know how many images i have for each category. I can write a global.js file and preload each and every category image into its array and then according to the size of the array get a unique number and then display the image according to that number. The image names are as:


Over here the first 1 is for categoryy 1 and then the second 1 image number for that category.

Is there any other better way of doing this?