Swap background on hover

[enspire]

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

[cjk]

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?

[cpj238]

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");

});



});

[Author]

Posts