Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Use javascript to add a letter in css?

Use javascript to add a letter in css?

Problem

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.

Problem courtesy of: Quest4Answers

Solution

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.

Solution courtesy of: Alnitak

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Use javascript to add a letter in css?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×