Anchor tag change image on hover and active

Question

I am trying to change the anchor tag image on hover and active, but it is not working.

HTML:

<div>
    <div id="accordion">
        <h3><a href="" runat="server" id="aCollection">test</a></h3>
        <div class="acsection" runat="server" id="divCollection">
            <ul>
                <li runat="server" id="collectionmenu1"><a href="1.aspx">page-1</a></li>
                <li runat="server" id="collectionmenu2"><a href="2.aspx">page-2</a></li>
                <li runat="server" id="collectionmenu3"><a href="3.aspx">page-3</a></li>
                <li runat="server" id="collectionmenu4"><a href="4.aspx">page-4</a></li>
            </ul>
        </div>
    </div>
    <h3><a href="5.aspx">Group</a></h3>
    <h3><a href="6.aspx">Send</a></h3>
    <h3><a href="7.aspx">contact</a></h3>
</div>

CSS:

#aCollection
{
    background-image: url(images/collection.jpg);
}

#aCollection:hover
{
    background-image: url(images/collection_hover.jpg);
}

#aCollection:active
{
    background-image: url(images/collection_active.jpg);
}

Answer 1

Try this one. it's working :). just add src= for the hover image and when the mouse out also add src=.

<a href="#"><img src="blah.jpg" onMouseOver=src="blah-hover.jpg" onMouseOut=src="blah.jpg"></a>

Answer 2

A tag is a inline element. You need a block element.

#aCollection {
     display: block;
     width: 50px;
     height: 50px;
     background: url('../images/image.jpg') no-repeat top left;
}
#aCollection:hover {
     background-image: url('../images/image_hover.jpg');
}
#aCollection:active {
     background-image: url('../images/image_active.jpg');
}