views:

205

answers:

2

I want to use the CSS visited functionality in the browser to style a clicked image:

CSS:

.gridview a.plusminus:visited img
{
    /* from http://my.opera.com/BleedingHeart/blog/2007/04/29/highlighting-visited-images-using-css */
    background: transparent !important;
    opacity: 0.2 !important;  
}

HTML:

<a class="plusminus" href="#12345" onclick="/* code to exand a panel*/" onfocus="this.blur();">
<img title="Expandera" src="img/grid_plus.gif" width="14" height="14"/>
</a>

This works fine in Firefox 3.5.

But for i.e. Explorer the opacity/transparent trick don't work. Is there a way that I can do this cross-browser?

Also explorer seems not to remember "#12345" type of hrefs for visited links when reloading pages. Any way to fix that?

+1  A: 

for opacity:

.gridview a.plusminus:visited img {
  -moz-opacity: 0.2; filter:alpha(opacity=20); opacity: 0.2;
}

sorry don't know about remembering of anchor refs (but as I know they should work)

tig
This worked fine thanks!
Niels Bosma
-moz-opacity has been deprecated since Firefox 0.9 ;)
Alex Barrett
Correct, plain old opacity will work for compliant browsers. Just put in the filter:alpha.... for IE
idrumgood
A: 
.gridview a.plusminus:visited img {
   opacity: 0.2;
   -ms-filter: "alpha(opacity=20)"; /* IE 8 */
   filter: alpha(opacity=20);       /* IE 4-7 */
}
Alex Barrett