Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript: changing background-image on table

Posted on 2008-06-13
5
Medium Priority
?
1,780 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:
Pawel Witkowski earned 2000 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:Pawel Witkowski
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

810 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