Forum Moderators: not2easy

Message Too Old, No Replies

Page background image change on Hover

making a background image change when you hoever over a link.

         

ColossalSquid

11:37 am on Feb 14, 2007 (gmt 0)

10+ Year Member



Hi, I've gone and done it again. I've designed something that I don't even know is possible to build.

I've got a site that no one could decide on the background. the shapes were all good, but there were a total of seven different colours for the image. So we came up with the idea of having a line of links along the bottom red : blue : orange : green : pink : purple : grey. The idea being that if you hover over the text link, the background image changes colour (really it's a different image each time). I just can't work if this is possible to do in CSS or even XHTML.

Perhaps I could have them all loaded up but only one visible at a time? But how would I do that for a background image?

Does this make any sense?

scriptmasterdel

10:50 pm on Feb 14, 2007 (gmt 0)

10+ Year Member



Hi ColossalSquid,

I am going to help you, i think i have grasped what you are trying to achieve.

If you are looking to create an effect on the document it's most likely to be javascript that is the solution. With javascript you can alter elements of the page on the fly, change content and colours and styles.

In a nut shell:

You have links at the bottom of your page.

You have a container with the backgroud image / colour you would like to change.

This is a little insight in what needs doing.

If you want the container to show a different background colour then it can be a simple as this.

<a href="myLinkAtTheBottomOfThePage.htm" OnMouseOver="document.getElementById('theContainer').style.backgroundColor = 'red'; return false;">This is link one</a>

Then you assign the id to the container you would like to change.

<div id="theContainer"></div>

Like i said this is a basic level, the better and "prefered" way is to reassign class names to the elements.

Please let me know if i have misinterpreted you.

Thank you and good luck.

Del