Change Link Image when active

Question

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 id="overviewtab" 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:

#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; 
}

it doesn't seem to work.. :o 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. :o thanks!!

Answer 1

I believe the selector is:

#gallery a:focus {...}

This is (inevitably) applied variably across browsers, however.

Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.

Presumably this would be more reliably effected with jQuery, but it can be done with CSS.

Answer 2

I am not seeing a style for visited? Only active and hover.

add

 #gallery a:visited{}

style and see if that helps.

But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.

For example, if you use jQuery you can do something like this:

$("#gallery a").click(function(){
    $("#gallery a").removeClass("ActiveClass");
    $(this).addClass("ActiveClass");
});

where ActiveClass is a CSS class for styling the link appropriately.

---

EDIT based on comment below.

Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.

Hence, create two classes in CSS:

 .lookA {/*Style for lookA*/}
 .lookB {/*Style for lookB*/}

of course you can use more meaningful names.

Then you can add a class to each of the links that you need to use in this scenario like this:

 <div id="tabs">
        <div id="overview">
             <a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
        </div>
        <div id="gallery">
             <a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
        </div>
        <div id="reviews">
             <a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
        </div>
    </div>

So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.

Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:

 $(document).ready(function(){
    $(".imagelink").click(function(){
       $(".imagelink").removeClass("lookB");
       $(this).addClass("lookB");
       return true;
     });

 });

So on click on the link, it removes lookB from any other link and applies it only to the clicked link.

Hope this helps a bit.

Answer 3

The solution of Vincent worked!! :) but how do I set overview to be lookB by default, upon loading the page, then lookB when gallery/reviews is clicked? setting overview to be class="imagelink lookB" didn't work. :p Thanks again!!