December 14, 2010 at 1:35 pm #31001
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/develDecember 14, 2010 at 11:23 pm #69844
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.
So, the question is why do you feel a need to change the background image on a link rollover?December 16, 2010 at 3:45 pm #69595
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:
$(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");
You must be logged in to reply to this topic.