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!!

Solution

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.

Comments

[laura]

how will the CSS for the ActiveClass look? :) Also, I have 3 different image-links. How will the code above affect this? :) I have #overview, #gallery & #reviews.

[Sikshya Maharjan]

What browser are you using? I recall having issues with this selector myself; I'm in transit at the moment, but I'll see if I can make it work when I get home.

[laura]

i'm using safari. it's really odd how i can't change the image link if the image link was selected/active. :(

[laura]

this might actually work!! :) Problem is, i have 3 separate images for each link when inactive, and 3 images when active. :o Also, how do i call on the jQuery script? Do i put this in the html page? :) Thanks so much!!

[laura]

it 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!!