PDA

View Full Version : JavaScript Help


technoid
05-23-07, 01:42 PM
I'm doing some webpage work and need to change the background image of a div and need to decide what image to use at runtime. So I want to use a variable when I change the background image. Here's what I'm doing and what I want to change for it to work like I want it to. I put all the info in the comments. The basic problem is I can't get a variable to work when I set the background image path. Any help would be appreciated.

// What I'm doing now
function changeBGImage(div_id, btn_state)
{
if(btn_state == 'up')
{
document.getElementById(div_id).style.backgroundIm age = 'url(graphics/btn-unselected.gif)';
}
if(btn_state == 'dn')
{
document.getElementById(div_id).style.backgroundIm age = 'url(graphics/btn-selected.gif)';
}
}

// What I want to do but doesn't work
//
// I want to set the button image at runtime to
// different buttons from different locations. So
// basically I want to use a variable when I set
// the background image of the div. I don't have
// much experience doing this so if you can help
// I'd really appreciate it.
//
function changeBGImage(div_id, btn_state)
{
var root_path = getRootPath();
if(btn_state == 'up')
{
var btn_path = root_path + 'graphics/btn-unselected.gif';
document.getElementById(div_id).style.backgroundIm age = 'url(btn_path)';
}
if(btn_state == 'dn')
{
var btn_path = root_path + 'graphics/btn-selected.gif';
document.getElementById(div_id).style.backgroundIm age = 'url(btn_path)';
}
}

evilghost
05-23-07, 01:46 PM
I'm doing some webpage work and need to change the background image of a div and need to decide what image to use at runtime. So I want to use a variable when I change the background image. Here's what I'm doing and what I want to change for it to work like I want it to. I put all the info in the comments. The basic problem is I can't get a variable to work when I set the background image path. Any help would be appreciated.

// What I'm doing now
function changeBGImage(div_id, btn_state)
{
if(btn_state == 'up')
{
document.getElementById(div_id).style.backgroundIm age = 'url(graphics/btn-unselected.gif)';
}
if(btn_state == 'dn')
{
document.getElementById(div_id).style.backgroundIm age = 'url(graphics/btn-selected.gif)';
}
}

// What I want to do but doesn't work
//
// I want to set the button image at runtime to
// different buttons from different locations. So
// basically I want to use a variable when I set
// the background image of the div. I don't have
// much experience doing this so if you can help
// I'd really appreciate it.
//
function changeBGImage(div_id, btn_state)
{
var root_path = getRootPath();
if(btn_state == 'up')
{
var btn_path = root_path + 'graphics/btn-unselected.gif';
document.getElementById(div_id).style.backgroundIm age = 'url(btn_path)';
}
if(btn_state == 'dn')
{
var btn_path = root_path + 'graphics/btn-selected.gif';
document.getElementById(div_id).style.backgroundIm age = 'url(btn_path)';
}
}

You need to use the eval function:

eval("document.getElementById("+div_id+").style.backgroundImage = 'url("+btn_path+")'");

fivefeet8
05-23-07, 11:12 PM
document.getElementById(div_id).style.backgroundIm age = 'url(btn_path)';


You're treating the javascript variable name as a string. It will not evaluate to a variable this way, but into the actual string: "url(btn_path)". And the CSS attribute would be:


div{
background-image: url(btn_path);
}


Replace with:


document.getElementById(div_id).style.backgroundIm age = 'url("'+btn_path+'")';


Since it's concantenated, the javascript variable remains a variable with the appropriate value and the whole string evaluates correctly.

technoid
05-25-07, 03:22 PM
You need to use the eval function:

eval("document.getElementById("+div_id+").style.backgroundImage = 'url("+btn_path+")'");

Thanks for your help. I might have done something wrong but I got an object expected error.

technoid
05-25-07, 03:32 PM
Replace with:


document.getElementById(div_id).style.backgroundIm age = 'url("'+btn_path+'")';

Since it's concantenated, the javascript variable remains a variable with the appropriate value and the whole string evaluates correctly.
Thanks a lot that was exactly what I needed. In the mean time I got this to work since it took a variable ok.

document.getElementById(id).src = imgsrc;

But I like your way better and will use it because it works the way I wanted to do it but got messed up with the string variable getting evaluated wrong. Thanks Again!