Solved

Javascript: changing background-image on table

Posted on 2008-06-13
5
1,764 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
Comment Utility

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
Comment Utility
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
Comment Utility
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
Comment Utility
thanks for all your help
0
 

Author Closing Comment

by:cyborama
Comment Utility
very helpful and quick to respond, very good with answers
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

763 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

9 Experts available now in Live!

Get 1:1 Help Now