Change Link Image when active

[lauranoel]

I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.

how do i set the image of my link to change when it's active?

here's my code:

            <div id="tabs">
                <div id="overview">
                     <a target="tabsa" href="toframe.html">Overviews</a>
                </div>
                <div id="gallery">
                     <a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
                </div>
                <div id="reviews">
                     <a target="tabsa" href="trframe.html">Reviews</a>
                </div>
            </div>
            <div id="tabs-1">
                <!--<div id="scroller">-->
                <iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
            </div>

CSS code:

    #overview a { 
    text-indent: -9999px; 
    padding-top: 40px; 
    background: url(../images/GalleryTab.png) no-repeat; 
    height: 51px; width: 123px; position: absolute; z-index: 2; 
    } 
    
    #overview a:active, a:hover { 
    text-indent: -9999px; 
    padding-top: 40px; 
    background: url(../images/galleryoverview.png) no-repeat; 
    height: 51px; 
    width: 123px; 
    position: absolute; 
    z-index: 2; 
    }

    #gallery a { 
    text-indent: -9999px; 
    padding-top: 40px; 
    background: url(../images/GalleryTab.png) no-repeat; 
    height: 51px; width: 123px; position: absolute; z-index: 2; 
    } 
    
    #gallery a:active, a:hover { 
    text-indent: -9999px; 
    padding-top: 40px; 
    background: url(../images/galleryoverview.png) no-repeat; 
    height: 51px; 
    width: 123px; 
    position: absolute; 
    z-index: 2; 
    }

    #reviews a { 
    text-indent: -9999px; 
    padding-top: 40px; 
    background: url(../images/GalleryTab.png) no-repeat; 
    height: 51px; width: 123px; position: absolute; z-index: 2; 
    } 
    
    #reviews a:active, a:hover { 
    text-indent: -9999px; 
    padding-top: 40px; 
    background: url(../images/galleryoverview.png) no-repeat; 
    height: 51px; 
    width: 123px; 
    position: absolute; 
    z-index: 2; 
    }

it doesn't seem to work.. i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. thanks!!

[Nile]

I don't understand. Can't you use the 'active' selector?