javascript - Dynamic variables for changing backgroundPosition -

i've found few loosely related answers none have level of variability need.

i trying create color-changing chip palette similar find on automobile website: when paint swatch clicked, main image's background position change, giving illusion paint color has changed. i'm still new javascript, think elegant way go it. can syntax actual working script?

defining css:

#target {       background: url("/images/center-stage.jpg") no-repeat;       background-position: 0 0; } 

function on external script file:

function colorchange(x,y) {     var x=("x" + px); // don't how format stuff     var y=("y" + px);     document.getelementbyid("target").style.backgroundposition="(,)"; // doesn't go here, it? } 

and html call(s):

<a href="#" onclick="colorchange(0,50)"><img src="/images/swatches/red.jpg"></a> <a href="#" onclick="colorchange(0,100)"><img src="/images/swatches/yellow.jpg"></a> <a href="#" onclick="colorchange(0,150)"><img src="/images/swatches/blue.jpg"></a> <a href="#" onclick="colorchange(0,200)"><img src="/images/swatches/green.jpg"></a> 

and on.

to make matters more complicated there 2 color variables; car website have exterior interior color choices, script needs have exterior , interior color options (black or white exterior 4 possible interior colors).

i thought best way have exterior options on y axis , interior options on x axis, need define calls in such way clicking red, yellow, blue or green move x-axis keep current selection same (and vice versa)

if change js this:

function colorchange(x,y) {     document.getelementbyid("target").style.backgroundposition=x+'px '+y+' px';  } 

the background image begin move. reason why wasn't working in example:

function colorchange(x,y)     {         var x=("x" + px); // don't how format stuff         var y=("y" + px);         document.getelementbyid("target").style.backgroundposition="(,)"; // doesn't go here, it?     } 

is statement: var x=("x" + px);

this won't work because "x" variable , should not quoted. 'px' string, , should quoted, statement becomes: var x = x+'px';

now, in statement: document.getelementbyid("target").style.backgroundposition="(,)";

you can set value directly without having use 'var x = x+"px"', becomes:

document.getelementbyid("target").style.backgroundposition=x+'px '+y+' px'; 

also, out of curiosity, using jquery or jquery type js library? because instead of saying:

document.getelementbyid("target").style.backgroundposition=x+' '+y 

you can say:

$("#target").css('background-position', x+'px '+y+'px'); 

---

** edit **

to update value need , not both x , y: css, there no background-position-x or equivalent. you'd have keep variable in js holds each of x , y values. change function update variable...and background-position change.

look @ code:

// variable outside of function() scope var xposition,       yposition;  // update values of xposition , or yposition function updatepositions(axes) { // should {x:0,y:0}     // check see axis passed in x, y or both, update values      if (typeof(axes.x) !== 'undefined') xposition = axes.x;      if (typeof(axes.y) !== 'undefined') yposition = axes.y;  //call function move bg image colorchange(); }  // function move bg image, using variables declared above function colorchange() {     // use xposition , yposition changed js function above     $("#target").css('background-position', xposition+'px '+yposition+'px'); }  $(document).ready(function() {     updatepositions({x:0,y:0}); // initialize starting position }); 

---

the {x:0,y:0} code above way i'm using pass on parameter function multiple values.
{} signifies javascript 'object'...so can this:

var obj = {}; obj.x = 150; obj.y = 200; console.log(obj); 

outputs: object {x: 150, y:200}

---

html (note can pass in x , y or x or y)

<a href="#" onclick="updatepositions({x:0,y:50})"><img src="/images/swatches/red.jpg"></a> <a href="#" onclick="updatepositions({x:0,y:100})"><img src="/images/swatches/yellow.jpg"></a> <a href="#" onclick="updatepositions({x:0})"><img src="/images/swatches/blue.jpg"></a> <a href="#" onclick="updatepositions({y:200})"><img src="/images/swatches/green.jpg"></a>