Here's a way where you can use a single Custom Property to contain a list of features (one character per feature). This will be used to automatically display the appropriate icons.
Create a Custom Property called FEATURES
In each product use the Custom Property to hold a character, e.g. W, L, X to represent each feature.
Put in as many characters as required. E.g. WL or XA
Put the following into Act_Primary.html just above the </head> tag.
<script type="text/javascript">
<!--
var icons = new Array('windows.jpg', 'linux.jpg', 'osx.jpg', 'advanced.jpg', 'intermediate.jpg', 'novice.jpg');// extend this array to add new icons
var keys = new Array('W', 'L', 'X', 'A', 'I', 'N'); // extend this array to add new characters
function showicons(cvar){
cvar = cvar.toUpperCase();
for ( i=0; i < keys.length; i++)
{
if ( cvar.indexOf(keys[i]) > -1 ) document.write('<img src="' + icons[i] + '"> ');
}
}
// -->
</script>
For each image in the icons array, keep them in PreviewHTML and add it for upload via advanced / additional files.
and in the Product Template where you want the icons to be displayed put
<script type="text/javascript">
<!--
showicons('CUSTOMVAR:FEATURES');
// -->
</script>
Add new icons to the icons array and corresponding key letters to the Keys array.