Question

I’m having issues with my noggin… Please help me answer this question:

is it possible to add a single letter to a string in css? (i would assume that it is by storing the original string and adding a letter at a specific position)

Here is my code:

.u_usa{
background-image: url(../images/icons/usa_24.png);
}

What I am looking to do is onclick change the css property to:

.u_usa{
    background-image: url(../images/icons/usa_24t.png);
    }

then when clicked, change it back (removing the “t”)…

the issue is that i have SEVERAL different classes that I want to use the same function on, each having a different location for the background image. The thing that stays the same is that one image has a t and one doesnt…

i need one function that, no matter what class im changing, is able to simply change one letter in the css property (whatever class is calling the function)

thank you in advance, If you couldnt tell by my jibberish posting, I have been working on these issues for a while and have fixed just about everything but this one item.

Thank you again…

edit:
what i am trying to achieve is creating a function that when run does a css switch, but is dynamic as to whatever class is running it. i have 60+ different divs that have backgrounds, when clicked i want to add or remove a “t” from the 4th to last character position of the css background image url.

Answer 1

You should add a second CSS rule for each class with a dual-class selector, e.g.:

.u_usa {
    background-image: url(../images/icons/usa_24.png);
}

.u_usa.clicked {
    background-image: url(../images/icons/usa_24t.png);
}

and then in your onclick event handler, add or remove the clicked class from the appropriate elements.