Ok, no idea if this can be done but what I'd like is a to be able to click a text link and have it change the background of a td (or a div could be done too.) In this case it's a mat color: http://www.inkart.net/art/wildlife_art/african_elephant/African-Elephant-white.php As you can see I have seven different .php files, which works but seems very inefficient. Would also like to keep the rollover. Thanks for any help or advice you could give.
You've gotta use javascript for this if you dont want to use 7 different php files. I suggest using the jQuery library for this .. here's a link that'll help you : stackoverflow.com/questions/253689/switching-div-background-image-with-jquery (cant post links.. so you've gotta copy paste) (it does say div, but it can be applied to any element of your choice.. if you dont understand what's in the link above I strongly suggest going over some basic javascript/jQuery tutorials)
Ok, what the **** hell is WRONG with people nowadays throwing this jquery ****otry at even the simplest of scripting issues?!? For what you want to do, just put an ID on the TD you want to change <td id="changeMe"> Then on your anchors do: onClick="document.getElementById('changeMe').style.background='#FFFFFF'; return false;" That's it, that's all you need, not some rubbish 20k library like jquery or mootools. THOUGH, You probably should NOT be using nested tables for a border layout like that, and you may want to implement class swapping for style so if you want to change other aspects of it like borders, you can... It may also help to use a function so you can change the value of the title attribute as desired... and huh, you aren't changing the background-color, you are changing the background-image! Big difference... Oh, and I don't think you need javascript for that hover state. ... and of course being you are writing this as a new page, you probably shouldn't be using transitional either... and a little formatting wouldn't kill you. All that said, I would ALSO use php versions as a fallback for when scripting is disabled/not present so people browsing under those limitations are not left out in the cold... but you shouldn't be wasting time writing seven different .php files when you could simply be passing the background as a parameter - so you'd only need ONE .php file, not several. Here's how I'd handle that: http://www.cutcodedown.com/for_others/roger_inkart/template.php The directory is unlocked so you can grab the gooey bits: http://www.cutcodedown.com/for_others/roger_inkart Likewise I put in a .phps so you can see the source: http://www.cutcodedown.com/for_others/roger_inkart/template.phps Valid XHTML 1.0 Strict, Valid CSS level 2, tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.6 and 10.10, FF 2 and 3.5, and the latest flavors of Safari and Chrome. ... and it even works when javascript is disabled - which is using javascript PROPERLY. Javascript should be used to enhance, not supplant. Scripting on it simply changes the one class on the outer wrapper and CSS handles everything else, scripting off we pass the parameter to our php to send the proper markup. You'll notice I no longer use an img tag. Centering IMG requires a table, so no table. Since this is likely to be script generated you'd probably want to state the image itself in the markup, so we do so with the style attribute (one of the few cases I advocate the use of STYLE in the markup). We use BOLD and ITALIC tags for the image so we don't have to resort to classes, likewise a span to show text when CSS is not present. I would consider changing that text to read "This page requires CSS to function properly". There's a lot of hover state 'trickery' in there to bring IE6 into line - I made certain to comment those so you don't accidentally 'tug' on the wrong things. When we change the classname on the outermost element, all our child elements can pick up on this in the CSS - in this case we use it twice. First, to change the background on a.imageFrame, but then I set it up a second time to 'match' the classes I added to the background choosing anchors, so that the 'current' one has the styling of being an anchor removed. In the php and javascript you can see I pass the full title of the color, which lets us set up our document title. Changing it to lowercase and replacing spaces with underscores allows us to quickly make a valid class name. I have a fallback handler for if a 'background' value is not supplied, though a more robust version should check the passed value against a list to prevent people from trying to pass code injections. Pretty simple, Hope this helps.