Dynamic image path

style class background image path dynamic change

[ssudhakar]

I have created css file which have style which support background image for the buttons. For the live site the path of the css file will be chanted dynamically smilarly i have to change the background image path in the css.

I need a help, how to change dynamically the background-url() path for the each style

[bazooka]

In my current project I use Javascript to change the image's source:

var tl = document.getElementById ("trafficlight"+question);
if (amber)
tl.src = "trafficlightamberlit.png";
else
tl.src = "trafficlightgreenlit.png";

I don't know if it is possible to do it just with CSS.

[ssudhakar]

I don't think its possible to change in css dynamically.

In the css there are 50-55 style classes which have image url.

Please see the below style sample which i have used.
.BgSrch { background:url(../images/golf_btn_middle.gif); }

Is there way i can change the path addition to (../images/*.gif). For example (../../../images/*.gif) before it gets applied into the page.

[alexdunae]

If I understand correctly, you want a rollover effect on your button.

Say you have your button:

<div id="btn_home" class="button><a href="/home">Homepage</a></div>

Your CSS could look something like

#btn_home a {
 display: block;
 background: transparent url("btn_home.gif") 0 0 no-repeat;
 text-indent: -9999em;
}

#btn_home a:hover {
 background-image: url("btn_home_hover.gif");
}

Even better would be to put both the standard and hover states in the same image and then move them around using 'background-position'.