Appending an image to a link based on its content

Question

I have a system that generated links to different parts of the application. I need to append an image next to the link based on its context. In CSS I would do it like this:

a {    
 color:#FF6600;
 padding-right:50px;
 background-image: url('images/system.png');
 background-position: right;
 background-repeat: no-repeat;

}

The problem with the above CSS rule is that all links get the same image.If a link has class="system" then system.png must be appended and if its got class="actions" action.png must be appended. I am guessing I could use jQuery to do this, any pointers?

Answer 1

use

a.system{
background-image: url('images/system.png');
.....
}
a.actions{
background-image: url('images/action.png');
....
}

Answer 2

a {
    color: #f60;
    padding-right: 50px;
    background-position: right;
    background-repeat: no-repeat;
}

a.system {
    background-image: url("images/system.png");
}

a.actions {
    background-image: url("images/actions.png");
}

Answer 3

Add IDs to the link. Use jQuery to select each ID, and change its background-image attribute to match what you need.

example:

for <a id="house" src="house.html">my house</a>

execute:

$("#house").attr("background-image", "house.png");.

Of course you can iterate over all links programatically, as long as their ID hints at the image you need to set.