Ставим в начало html-низ
<script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){
myarray=new Array(
"Название", "ссылка на картинку",
"Название", "ссылка на картинку",
"Название", "ссылка на картинку" //Последний элемент без запятой!
)
$("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){
var cssObj = {
"height":"100px",
"background-color": "transparent",
"background-image":"url("+myarray[q+1]+")",
"background-position":"50% 50%",
"background-repeat":"no-repeat"
}
if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
q++}
});
});
</script>
♦ Розовым выделены названия категорий.
Синим - ссылка на устанавливаемую картинку.
Зеленым - высота картинки.
♦ "Название", "ссылка на картинку",
Копируем столько, сколько понадобится.
♦ Чтобы скрыть название категорий шрифтом, ставим такой скрипт в html-верх:
<style>
#pun-stats h2 span,
.category h2 span {
visibility:hidden!important;
}
</style>
Синим - статистика, если потребности отключать статистику нет, строку убираем.