Solved

Javascript: changing background-image on table

Posted on 2008-06-13
5
1,768 Views
Last Modified: 2010-04-21
My question deals with a Javascript problem I am having.

I have a client that wants me to create a tabbed menu type interface for them with different colored tabs and when you click on one of these colored tabs the main body background should change color.  This is no problem I just simply use a function with  a routine like document.body.style.backgroundColor=hexnumber;

The problem comes in that in order to give a more 3D look at the end of the background is a shadow image that gives it a semi embossed look which is found on the left side, right side and bottom. The bottom uses two colors for its image to account for some of the white innertable as well as to create a strip of background color to make it look finished.

What needs to happen at least the way I see it is that each time javascript changes the body color with an onclick event attached to each given tab it also needs to change the shadow images on the left, right, and bottom areas of the site to reflect a darker color of what ever the body color was changed to.  Problem is I haven't been able to figure out how this could be achieved.  The tag that needs some modifications is a td tag within a table that is within another table if that makes any sense to you.

I gave this td tag an id name of shadowleft and put some initial specs in the #shadowleft id in the css file but every time I try to change the backgroundImage property via Javascript it just won't work.  The best I could get to happen is to have the javascript get rid of the graphics altogether rather then swap them for the ones requested.

I was using the getElementById method to try and achieve this but it did not seem to work at all

Here are the functions I used:

<script type="text/javascript">

function changeColor(hex)
{
document.body.style.backgroundColor=hex;
}

function changeShadowImage(shadowleft, shadowleftimage, shadowright,  shadowrightimage, shadow, shadowbottom)

{
document.getElementById (shadowleft).style.backgroundImage="url('shadowleftimage')";

document.getElementById (shadowright).style.backgroundColor=shadowleftimage;

document.getElementById (shadow).style.backgroundImage="url('shadowbottom')";

}

</script>

here are the calls I used:

<p><a href="http://localhost/dotnetnuke/Media/MediaContactsforBerkshireVenues/JimneyPeakPage/GalleryPage/tabid/547/Default.aspx" onclick="changeColor('#000000');changeShadowImage('shadowleft','/Portals/_default/Skins/HomePage/images/shadow_left-t.gif','shadowright','#ffffff','bottomcap','/Portals/_default/Skins/HomePage/images/bottom_cap.gif')" target="hometab">test</a></p>

Thanks for any help you might be able to offer.

0
Comment
Question by:cyborama
  • 3
  • 2
5 Comments
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 total points
ID: 21784507

function changeShadowImage(shadowleft, shadowleftimage, shadowright,  shadowrightimage, shadow, shadowbottom)

{
document.getElementById (shadowleft).style.backgroundImage="url('shadowleftimage')";
document.getElementById (shadowright).style.backgroundColor=shadowleftimage;
document.getElementById (shadow).style.backgroundImage="url('shadowbottom')";
}

Main mistakes with braces. After what you type in style.backgroundImage will be always string with content:  "url('shadowleftimage')". To achieve what you want you need to close bracers then open them again like this:


function changeShadowImage(shadowleft, shadowleftimage, shadowright,  shadowrightimage, shadow, shadowbottom)

{
document.getElementById (shadowleft).style.backgroundImage="url("+shadowleftimage+")";
document.getElementById (shadowright).style.backgroundColor=shadowleftimage;
document.getElementById (shadow).style.backgroundImage="url("+shadowbottom+")";
}

And in backgroundImage's url() we do not uses apostrofes (like. url('someimage.jpg'),  but we use url(someimage.jpg) )
0
 

Author Comment

by:cyborama
ID: 21788825
Thank you so much that was it but before I close this question I just have one more small question?

With the original way I had the function constructed why do you think I was not getting any javascript erros when trying to do debugging wiht firebug which is a firefox plug in.  It is almost as if the use of single quotes within the braces turned out to be a logic error.

So does this mean that the only time you make use of the single quotes is when you are making a call to a function that requires a literal string to be passed to that function.

Also is there ever a time when writing a Javascript function where tit because nescessary to use single quotes or within functions do you always have to do it the way you described above with the concognating simble seperating the beginning of a double quote when dealing with a nesting string or are their times within a function statement where you would use single quotes.

You know I was struggling over this issue for a couple days that you just helped me with because I was determined everything about that statement was correct as I  had javascript books and everything but I guess I learned but I guess this goes back to that old rule that says if you churn to long you'll never see the problem and a different set of eyes will have to evaluate it.

Thanks for your help it is really appreciated.


Bo
0
 
LVL 18

Expert Comment

by:wilq32
ID: 21789715
In javascript, and many other languages (as I remember PHP is diffrent with this), when you open braces with " or ', everything inside will be a string until you close it with the same bracer of opening (in PHP you could do something like this echo "some $value here", but as far as i know - this works only in PHP (maybe in other languages too, dunno), not in Javascript).

So to make it precise:

var a="test";               // gives "test"
var b='test2';              // gives "test2"
var c="test test2";       // gives "test test2"
var d='test'+"test2";    // gives "testtest2"
var e="test"+test2;     // gives  error (test2 undefined)
var f="test"+b;           // gives "testtest2"
var g=a+b;                // gives "testtest2"
var h=a+" "+b+" is ok";   // gives "test test2 is ok"


Hope now you understand ;)
0
 

Author Comment

by:cyborama
ID: 21789862
thanks for all your help
0
 

Author Closing Comment

by:cyborama
ID: 31467010
very helpful and quick to respond, very good with answers
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now