I finally have some time to look at this! I cant thank you enough for your time :)

Yes this is exactly what I want. Ill start preparing the images, and see how I get on!

Do you think it will look good, or a little confusing to the eye? Personally I think the images will help entice people click the catagories, someone else told me they think it will be messy and too busy...

Thank you!!

Happy Easter!

Chantel

I modified the category query in div id="middle" in some places, so you have to replace the full code from

<div id="middle" class="clearfloat">

down to

<?php $i++; ?>

Code will follow later, going to tell you what it does:
In $display_categories = array(... you have to put your categories as before, 5 or a multiple of 5, you have 25 categories listed.
The line with $theCatSlug = get_term_by gets the slug of your categories to link each one with an image. These 25 images should be named with the slug of the category plus .jpg extension, ie: dietfitness.jpg for Diet & Fitness category or mens.jpg for your Male Grooming category. You can find the slug in edit categories or in the link to your Archive of that category, like ...hk.com/category/mens/

now - that's your job to create 25 images in the size of 184pxx80px. These images have to be in a new folder (cats) behind themes folder in images/cats/ (content/themes/arthemia/images/cats)

No image for a category means that place becomes blank on hover as in demo link in previous post.

Back to index.php, I don not use
div id="cat-<?php echo $i; ..
but
div id="cat-<?php if( $odd = $i%2 ) ..
this will just show div id="cat-odd" or div id="cat-even" and makes your style.css easier, no list of all categories with different styling anymore.

The background (category) images are loaded straight but with a ;background-position: -200px, thus invisible. The entry in style.css .category:hover {background-position: 0 0 !important; makes them visible on hover.

I used Chantel's stylesheet and changed not much, she just has to replace all from
#middle {
down to
#front-list {

now the replacement code for index.php (BACKUP FIRST)
-

<div id="middle" class="clearfloat">

	<img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/category.png" class="clearfloat" alt="" />
	<?php $display_categories = array(3,4,5,8,10,11,16,20,22,32); $i = 1;  //please put here your own category IDs !!!
	foreach ($display_categories as $dcategory) { ?>

		<?php $theCatSlug = get_term_by( 'ID', $dcategory, 'category' );
			$theCatSlug = $theCatSlug->slug; ?>

<div id="cat-<?php if( $odd = $i%2 ) { echo 'odd'; } else { echo 'even'; } ?>" class="category" style="background-image: url(<?php echo bloginfo('template_url'); ?>/images/cats/<?php echo $theCatSlug; ?>.jpg); background-repeat: no-repeat;background-position: -200px 0;z-index:0;cursor:pointer;" onclick="window.location.href='<?php echo get_category_link($dcategory);?>'" title="Go to <?php echo get_cat_name( $dcategory ); ?>" >

		<a class="overlay" href="<?php echo get_category_link($dcategory);?>">
			<span class="cat_title"><?php echo get_cat_name( $dcategory ); ?></span>
				<?php echo category_description($dcategory); ?>
				</a>

</div>
	<?php $i++; ?>

-
and the modified part to replace in style.css (BACKUP?!)
-

#middle {
	width: 920px;
	background:#fff;
	float:right;
	padding:10px;
	margin:10px 0;
	}

.category {
	width:164px;
	height:70px;  /* new */
	float:left;
	border-top:8px solid #333;
	margin:0px;
	padding:5px 10px 10px 10px;
	}
.category:hover {
	background-position: 0 0 !important;
	font-size:0.001em;
	}

.category p {
	margin:0;
	}

#cat-odd{border-top:8px solid #333333;}
#cat-even{border-top:8px solid #FF0033;}

/* not needed, replaced by #cat-odd and #cat-even just below !!
#cat-1, #cat-3, #cat-5, #cat-7, #cat-9, #cat-11, #cat-13, #cat-15, #cat-17, #cat-19, #cat-21, #cat-23, #cat-25{border-top:8px solid #333333;}
#cat-2, #cat-4, #cat-6, #cat-8, #cat-10, #cat-12, #cat-14, #cat-16, #cat-18, #cat-20, #cat-22, #cat-24{border-top:8px solid #FF0033;}
*/

#cat-odd{
	border-top:8px solid #333333;
	}
#cat-even{
	border-top:8px solid #FF0033;
	}

.category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
	text-transform:lowercase;
	margin:0;
	font-weight:bold;
	font-size:1.5em District;
	letter-spacing:-0.05em;
	}

#front-popular h3 {
	color:#fff;
	}

.category a {
	color:#333;
	display:block;
	background:none;
	}

a.overlay:hover {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
/* commented out, not needed because .category:hover makes background image visible
#cat-1:hover, #cat-3:hover, #cat-5:hover, #cat-7:hover, #cat-9:hover, #cat-11:hover, #cat-13:hover, #cat-15:hover, #cat-17:hover, #cat-19:hover, #cat-21:hover, #cat-23:hover {background:#333333; color:#fff; }
#cat-2:hover, #cat-4:hover, #cat-6:hover, #cat-8:hover, #cat-10:hover, #cat-12:hover, #cat-14:hover, #cat-16:hover, #cat-18:hover, #cat-20:hover, #cat-22:hover, #cat-24:hover {background:#FF0033; color:#fff; }
#cat-1:hover a, #cat-3:hover a, #cat-5:hover a,  #cat-7:hover a, #cat-9:hover a, #cat-11:hover a, #cat-13:hover a, #cat-15:hover a, #cat-17:hover a, #cat-19:hover a, #cat-21:hover a, #cat-23:hover a {background:#333333; color:#fff; }
#cat-2:hover a, #cat-4:hover a, #cat-6:hover a, #cat-8:hover a, #cat-10:hover a, #cat-12:hover a, #cat-14:hover a, #cat-16:hover a, #cat-18:hover a, #cat-20:hover a, #cat-22:hover a, #cat-24:hover a {background:#FF0033; color:#fff; }
*/
#bottom {
	width: 940px;
	}

#front-list {
	width:590px;
	background:#fff;
	padding:10px;
	font-size:1.5em District;
	line-height:1.75em;
	float:left;
	}

-
If something is not working, come back 'n ask, happy day..

http://themes.go41.de/extend/?wptheme=arthemia

should show you arthemia theme, now click:

http://themes.go41.de/extend/articles/

this category bar, is it about what you think?

Please look at http://www.beautybuzzhk.com.

I have extended my catagory bar to hold now 25 catagories. I wish to have an image when the mouse rolls over instead of the colour block. The image will be different for every catagory and also they have to be the same size.

I saw your example of http://themes.go41.de/?wptheme=Barthami_Corporate. this is similar to what i want except:

i want the natural state ie with no roll over, to be with a white background, text and no image. (as it is currently)

i want the rollover state to have no words and have a photo. So i want the text to dissapear and be replaced by an image.

i want all the photos to be the same size.

Thank you again for all your help.

Chantel