Display related images based on text name
A few thoughts come to mind here:


You are not properly using inheritance in your CSS.  You should probably have one definition for .product-options ul.options-list .label&gt;label which contains every single CSS declaration except for the actual background image. As these will not change.  Then just have definitions for .product-options ul.options-list .label&gt;label.* (where * is green, black, etc.) that are one line each (specifying background-image), as that is the only part that changes based on color.
You might consider not using images at all in favor of pure CSS.  This could actually give the benefit of potentially not having to declare per-color CSS styles at all, in favor of just changing the background color value on the elements to one of the valid CSS named colors. Here are CSS-only examples for different shapes. This would actually perform better as there would be no images to download at all.
Your variable names are not very meaningful. For example inner might better be called labels or similar (or $labels if you use the convention of pre-pending jQuery collections with $). Perhaps color instead of classN.
You might need to give up hope of individually checking each label element text as being one of allowed color values. Or look to solutions like these to provide validation that the color names are good.
Since you are working against a jQuery collection,  you might consider using $.each() as your iterator rather than a for loop.


Combining these approaches might mean you can simplify your code down to:

var jQuery = $.noConflict();
jQuery(document).ready(function(){
    var $labels = jQuery(" .product-options ul.options-list .label&gt;label");
    $labels.each(function() {
        var color = $(this).text();
        // perhaps validate color here as noted above in link
        if(colorIsValid(color)) {
            $(this).css('background', color);
        } else {
            throw new RangeError('Unexpected color value.');
        }
    }
});