Hover Over Category = Changes Main Image - Magento

Question

I am trying to create a website like the following:

http://www.prada.com

Similar to this site, when users hover over the category the main image below changes. What is the best way to achieve this through Magento? Should the images be assigned to the category pages or...? This is my existing CSS for the current, main image:

 body.cms-home .main-container {
 background: url(../images/main.jpg);
 background-size: 100%;
 }

Perhaps this even needs to be assigned through the CMS Page for the 'home page' since this reaction will only appear on the home page.

Or maybe I can link the hover-option on the text with the above CSS and change the image name each time? Like this (only this doesn't seem to be working):

 body.cms-home .main-container #nav li.level0.nav-4 a:hover {
 background: url(../images/main2.jpg);
 background-size: 100%;
 }

Any guidance will be extremely appreciated!

Answer 1

Quick and dirty approach to this is to use jQuery.

Example of:

• 3 top categories (A, B, C)
• 3 images to change to (A.jpg, B.jpg, C.jpg)
• default background image K.jpg
• .cms-home .main-container is where the background photo will be changed upon hovering

Your Magento generated navigation should have the similar structure of

<li class="level0 nav-0"><a href="http://example.com/a.html" class="level0 ">A</a></li>
<li class="level0 nav-1"><a href="http://example.com/b.html" class="level0 ">B</a></li>
<li class="level0 nav-2"><a href="http://example.com/c.html" class="level0 ">C</a></li>

In your home CMS page put this content at the bottom, update the backgroundImages with the right link to your media.

<script>
    (function(){
        var backgroundImages = [
            "/media/wysiwyg/K.jpg", // default background image link
            "/media/wysiwyg/A.jpg", // background image for category A
            "/media/wysiwyg/B.jpg", // background image for category B
            "/media/wysiwyg/C.jpg", // background image for category C
        ];

        function updateBg(position){
            jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')');      
        }

        jQuery(document).ready(function(){
            jQuery('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
            jQuery('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
            jQuery('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
        });        
    })();
</script>

This is a manual solution which requires maintenance upon updating categories/images.

Tailored module approach is more recommended.