In your older Atahualpa version the single menu items don't have numbered CSS classes. Replace your functions/bfa_hor_pages.php with one from version 3.4.2
Then use a CSS Insert
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
color: transparent;
background: transparent;
font-size: 1px;
}
div#menu1 ul.rMenu li {
width: 100px; /* width of images */
}
li.page-item-2 {
background: url(/blog/wp-content/themes/atahualpa/images/spoon1.gif) no-repeat scroll center left;
}
li.page-item-14 {
background: url(/blog/wp-content/themes/atahualpa/images/spoon2.gif) no-repeat scroll center left;
}
li.page-item-39 {
background: url(/blog/wp-content/themes/atahualpa/images/spoon3.gif) no-repeat scroll center left;
}
These numbers will be different for your pages, look into the source code of a browser rendered page and watch for
<li class="page_item page-item-21">
You may have to adjust the position of the images:
background: url(...) no-repeat scroll center left;
See
http://www.w3schools.com/css/css_background.asp
The menu item text is set to transparent here and a size of 1px, so it won't be wider than the image. There may be better ways to do this without having to edit functions/bfa_hor_pages.php.