Skip to main content

Forums

This topic contains 2 replies, has 0 voices, and was last updated by  enspire 8 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31001

    enspire
    Member

    I’m trying to implement a solution for a client but can’t seem to find any satisfactory solutions.

    Here’s the scenario…

    I have a main level navigation that is currently setup to swap images on hover. This all works fine. I’m trying to add an additional function that not only swaps the menu image on hover but swaps the entire page background on hover. Some sort of “div” swap I think? I’ve racking my brain but seem to figure out how this would work.

    Any help would be awesome…here’s a link to the dev site: http://reed-hill.com/devel

    #69844

    cjk
    Member

    Well you could do this with positioning and negative margins etc. but that would mean a full page image for each link button…. sucks bandwidth in a hurry. Chris wrote a demo on this concept that can be found in downloads, I think it was remote linking or something to that effect.

    I’m not a javascript freak but I’m sure it could be accomplished that way but again, even if you sprite those multiple full page backgrounds, that is a huge file to download!

    So, the question is why do you feel a need to change the background image on a link rollover?

    #69595

    cpj238
    Member

    Let me first say this…You have way way way too many different ID’s.

    this jquery trick should work. notice all the friggen IDs??? lol you don’t need a different ID per page to have specific things happen, just use CSS… anywho, i wrote this:

    $(document).ready(function(){

    $('#menu a').hover(function(){
    $(this).parent('#corporate, #corp_current, #corporate_global').parents().eq(4).css("background","url(images/corporate/corporatebg.png) top center no-repeat");
    $(this).parent('#smallbusiness, #smallbus_current, #smallbusiness_global').parents().eq(4).css("background","url(images/smallbusiness/smallbusinessbg.png) top center no-repeat");
    $(this).parent('#education, #education_current, #education_global').parents().eq(4).css("background","url(images/education/educationmainbg.png) top center no-repeat");
    $(this).parent('#creative, #creative_current, #creative_global').parents().eq(4).css("background","url(images/creative/creativebg.png) top center no-repeat");
    });

    });
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star