0

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!

1 Answer 1

0

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.

2
  • Thank you! This is great!! I plan on creating sub-categories also (similar to the Prada site), will this also work if they're clicked (i.e. keep that image)? Apr 27, 2015 at 18:26
  • I think I worked it out; i'd do the same code as above for that CMS page but change the default background image? Apr 27, 2015 at 19:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.