Search code examples
htmlcssdisplaytag

Changing background images on click

I have a table with a header that is sorted using the Display tag library.

When a header is clicked, I want to remove a background image from the other headers and display an "Up Arrow" image. When the same header is clicked again, I want a "Down Arrow" image to be displayed.

This is the CSS I'm using to do it right now.

CSS

th {
    height: 25px;
    border: 1px solid #EAEAEA;
}

th.sortable a:ACTIVE {
    background: url("../images/integration/downArrow.gif") no-repeat 30%;
} 

th.order1 {
    background: url("../images/integration/upArrow.gif") no-repeat 30%;
}
Solution

  • I got the solution, and I am extremely sorry those who are still trying to understand the question. Run my solution and you will not only get the question also the answer. I just needed to configure order1 and order2 in my CSS.

    th.order1 {
background: url("../images/integration/upArrow.gif") no-repeat 30%;
} 

th.order2 {
background: url("../images/integration/downArrow.gif") no-repeat 30%;
}