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

[rocknbil]

Welcome aboard lauranoel!

I think you might misunderstand the active state. As you discovered, active is only triggered when that link is the active link via mouse down or navigation event. As soon as you take focus away from the link, it returns to the :link or :visited state.

The "visited" selector will give you some results, but then, as each frame is loaded, they all take on the visited state.

What you are probably looking for is "the current page" state, which (I don't think) there is a CSS selector for. What you need to do is set a "current page" set of selectors, and change the document. This is relatively easy to automate for dynamic pages, but for standard pages you have to hard code it.

Slightly modified for semantic elements,

<ul id="tabs">
<li id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</li>
<li id="gallery" class="current-page">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</li>
<li id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</li>
</ul>

Then create a current-page selector for whatever page is loaded.

[lauranoel]

Thanks for this. Will this work if when the user clicks on the tabs, the only thing that changes is the iFrame within the page, and not the entire page itself? :) How will the code know that it was the gallery tab that was clicked, if this was so?

Thanks again! :)

[lauranoel]

Thanks for this. Will this work if when the user clicks on the tabs, the only thing that changes is the iFrame within the page, and not the entire page itself? :) How will the code know that it was the gallery tab that was clicked, if this was so?

Thanks again! :)

[rocknbil]

the only thing that changes is the iFrame within the page, and not the entire page itself? :)

<facepalm> You're correct, probably the reason you're using an iframe is so you don't have to reload the navigation.

I don't have a pure CSS answer, others might. I'd do this with Javascript. Attach a set of behaviors to the links on load of the window, and when one is clicked you'd change the style of the link dynamically.