Goal: PHP to set object class, CSS display image based on class, make image linkable. Not working

First I have php generate a table, then when it comes to an arrow image I want php to assign a specific class to the object depending on conditions. The goal is to get a different linkable image for different conditions.

Here is my php script generating the link.

    <a href="javascript:void(0)"

        '; if ($row['upVote'] > 0) { echo '
            class = "used_upArrow"
           ';} else {echo '
               class = "new_upArrow"
               ';} echo '
                rowid="' . $row['item_id'] . '">
   开发者_运维知识库  </a>

Here is my CSS:

a.new_upArrow{
background-image: url('../Img/new_upArrow.gif');
}

a.used_upArrow{
background-image: url('../Img/used_upArrow.gif');
}

The only way for me to get the image to actually show up is if I add text < a>HERE< /a> in the php script, but obviously this gets in the way of the image. Looking online there are "css hacks" to hide text or move it, but that seems like an unnecessary work around that not every browser will respect. Are there other options here?

FYI,The end result is I would like to be able to change the class with jQuery and have the image change, that is why I am doing it like this.

Anchor tags () and other inline elements expand to the size of the content they contain. Since your anchor tag is empty, it has a height and width of zero. The background image is there, but the element is so small you can't see it.

To fix the problem, convert the anchor tag into a block element (instead of inline) and give it a size. CSS:

a.new_upArrow, a.used_upArrow {
    display: block;
    height: 100px;
    width: 100px;
}

Change the height and width to match the dimensions of your image.