a:active not working in Firefox or Netscape

[tjanson]

Hi all. I would be much appreciative of your help on this. I have spent far too long trying to figure out why my a:active css is not working on the thumbnails below the large image when you click on one. Works fine in IE, but not on Firefox 1.0.4 and Netscape 8.0.4 for Windows.
Thanks so much for your input.

Offending CSS:

a.thumbnailuw:visited {
display : block;
border : 2px solid #000000;
}

a.thumbnailuw:hover {
display : block;
border : 2px solid #65ADE7;
}

a.thumbnailuw:active {
display : block;
border : 2px solid #65ADE7;
}

Site I'm applying it to:
http://www.johntorrente.com/index.html

[mwinter]

I have spent far too long trying to figure out why my a:active css is not working on the thumbnails below the large image when you click on one.

That's because it is working.

Works fine in IE, but not on Firefox 1.0.4 and Netscape 8.0.4 for Windows.

No, it works as you'd like it to in IE. That's rather different.

The :active pseudo-class is only applied whilst the user is 'activating' an element. The CSS specification gives, for an example of this state, "between the times the user presses the mouse button and releases it." It doesn't definitively state when any of the interactive pseudo-classes apply, or which elements might exhibit them. However, it seems to me that IE is wrong, and is in fact acting like the :focus pseudo-class is in effect.

There is another thread similar to this one in the JavaScript forum.

Mike

[jscheuer1]

Mike, can we infer from this (your above post) that:

a.thumbnailuw:focus {
display : block;
border : 2px solid #65ADE7;
}

Would have the desired result?

[tjanson]

SO I tried this:

a.thumbnailuw:focus {
display : block;
border : 2px solid #65ADE7;
}

And it didn't achieve the desired results. So should I give up and go with a javascript solution like:

<img onmouseover="javascript:this.style.borderColor='#65ADE7" onmouseout="javascript:this.style.borderColor='#000000" class="image" src="" width="100" height="100" border="0" align="left">

Thoughts?

[jscheuer1]

That's what I was going to suggest initially but, wasn't 100% certain there might not be a css solution. You will need to be careful not to add (javascript) borders to (css) borders when implementing this though. Your code as is will not achieve the result I think you want anyway. To do that, some method of collecting all the items involved needs to be used. Then they can be walked through and have their borders turned on and off as needed to achieve the effect you are going for. A common method is to use the inner element collected and distinguished by its parent's class name:

function swap(imgIndex, el) {
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw')
timgs[i_tem].id=''
el.firstChild.id='active_id'
document['imgMain'].src = Images[imgIndex];
}

Then call the function from the HTML like so:

<td class="thumbnailuw"><a href="#" onclick="swap(1, this);return false;"><img src="img/small/2small.jpg" width="30" height="20" alt=""></a></td>

You can give the img tags mouseover/out events to simulate the hover border effects you want, like in your post but, since they can be definitions for new classes I'll create, the code can be like this:

<img onmouseover="this.className='another_class'" onmouseout="this.className='some_class'" class="some_class" src="" width="100" height="100" border="0" align="left">

Set all the anchor tags (.thumbnailuw a) css (and all their pseudo classes) to border:none. Then the some_class can have the border definition for 'inactive', the another_class the 'hover' border profile and the id active_id will have the 'active' definitions:

<style type="text/css">
.some_class {
border : 2px solid #000000;
}

.another_class {
border : 2px solid #65ADE7;
}

#active_id {
border : 2px solid #65ADE7;
}
</style>

As a finishing touch, add an id to the first anchor tag in the series (or whichever one you want 'active' onload):

<td class="thumbnailuw"><a id="first" href="#" onclick="swap(0, this);return false;"><img src="img/small/1small.jpg" width="30" height="20" alt=""></a></td>

Now your onload event can be like so:

<body class="home" onLoad="swap(0, document.getElementById('first'));">

[jscheuer1]

I played around with this a bit more and simplified it (or complicated it, depending upon your point of view) to:

Use these style definitions:

td.thumbnailuw a:link, td.thumbnailuw a:visited  {
      	display : block;
      	border : none;
      }

td.thumbnailuw a:hover, td.thumbnailuw a:active  {
      	display : block;
      	border : none;
      }

.init_image, .inactive_class {
border : 2px solid #000000;
}

.hover_class, #active_id {
border : 2px solid #65ADE7;
}

These two functions, in a script block in the head:

function swap(el) {
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw')
timgs[i_tem].id=''
el.firstChild.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}

function init(){
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].parentNode.onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}

This body onload event:

<body class="home" onLoad="init();">

And, this simplified HTML for the thumbnails:

<td class="thumbnailuw"><a id="first" href="#0"><img class="init_image" src="img/small/1small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#1"><img class="init_image" src="img/small/2small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#2"><img class="init_image" src="img/small/3small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#3"><img class="init_image" src="img/small/4small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#4"><img class="init_image" src="img/small/5small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#5"><img class="init_image" src="img/small/6small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#6"><img class="init_image" src="img/small/7small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#7"><img class="init_image" src="img/small/8small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#8"><img class="init_image" src="img/small/9small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#9"><img class="init_image" src="img/small/10small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#10"><img class="init_image" src="img/small/11small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#11"><img class="init_image" src="img/small/12small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#12"><img class="init_image" src="img/small/13small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#13"><img class="init_image" src="img/small/14small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#14"><img class="init_image" src="img/small/15small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#15"><img class="init_image" src="img/small/16small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#16"><img class="init_image" src="img/small/17small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#17"><img class="init_image" src="img/small/18small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#18"><img class="init_image" src="img/small/19small.jpg" width="30" height="20" alt=""></a></td>
<td class="thumbnailuw"><a href="#19"><img class="init_image" src="img/small/20small.jpg" width="30" height="20" alt=""></a></td>						    	    	    	    
		</tr>

Put this after the table for the gallery:

<noscript><br>&nbsp;<br><div align="center" style="color:white;background-color:black;">Javascript must be enabled for above gallery to function properly.</div></noscript>

[mwinter]

Mike, can we infer from this (your above post) that:

a.thumbnailuw:focus {
display : block;
border : 2px solid #65ADE7;
}

Would have the desired result?

No. The :focus pseudo-class is another interactive, and therefore transient, effect. Once focus is moved away from the link (by clicking, tabbing, or a similar method) the border will no longer apply. As the OP is trying to highlight the thumbnail of the currently shown image, this wouldn't be appropriate.

Ideally, the OP would dump the client-side scripting in favour of something server-side (or at least in combination). When the user activates a link, the document would be served anew, with the markup altered to indicate which link is active.

function swap(imgIndex, el) {
var timgs=document.getElementsByTagName('img')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].parentNode.parentNode.className=='thumbnailuw')
timgs[i_tem].id=''
el.firstChild.id='active_id'
document['imgMain'].src = Images[imgIndex];
}

One should be careful when walking through the document tree using the firstChild property (and similar). If the markup contains white space, the property will reference that text node, not the element after it. Search for the element wanted, don't assume that it will be there.

In this instance, I'd modify the id attribute of the links, not the images.

Mike

[jscheuer1]

One should be careful when walking through the document tree using the firstChild property (and similar). If the markup contains white space, the property will reference that text node, not the element after it. Search for the element wanted, don't assume that it will be there.

Generally I agree with this (and it would also apply to the use of parentNode in the script), in this case, working with the OP's original code, it is a valid assumption. Your well taken point should also be taken as advice that, if the method I've outlined is used, care must be exercised in writing the markup - that it conform to the template provided. This is often true when javascript effects are involved.

The code and markup could be rewritten to avoid walking the tree, I think. At the very least, to employ a while loop to search for the specific node or type of node, if it exists, that sort of thing. That would be a very good idea if this were to be used as a "plug 'n play" script suitable for a wide variety of markups.

[tjanson]

Thanks so much for all the help. I will post later with the results.

[jscheuer1]

I really did like Mike's suggestion, found it fairly easy to implement compared to coming up with the scheme in the first place. I also found a way (hinted at in my last version with the use of # hrefs) for rudimentary functionality in non javascript enabled browsers. Here's the whole page as it is now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>John Torrente Photography</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="keywords" content="John Torrente, Photography, World Photographer, Landscape, Peoplescape, Nutty Guy, documentary photography, travel photography, black and white photography, street photography">

	<style type="text/css">
	body  {
	    background : #000000;
      	font-family : arial;
		font-weight: bold;
      	font-size : 12px;
      	color : #CCCCCC;
      	Margin : 0px;
      	Margin-top : 0px;
      	Margin-bottom : 0px;
      	border-width : 0px;

      }
	  
      table  {
      	font-family : arial;
      	font-weight : normal;
      	font-size : 12px;
      	color : #CCCCCC;		
      	padding : 0px;
      	border-spacing : 0px;
      	border-collapse : collapse;
      	border : 0px;
      }
	  	  
	  img {border:0;}
	  
	  A {
	     text-decoration: none;
		 }
	  A:hover {
	     text-decoration: underline;
		    } 
	  
      A.opacity:hover img { 
	    filter:alpha(opacity=50);
   		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   		-moz-opacity: 0.5;
 	    -khtml-opacity: 0.5;
   		opacity: 0.5;
		  }
		 
	 
      A:link, A:visited {
	    color:  #CCCCCC;
	    filter:alpha(opacity=80);
   		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
   		-moz-opacity: 0.8;
 	    -khtml-opacity: 0.8;
   		opacity: 0.8;      
		}	
		
 
	  
	  
	  body.home {
	    color : #000000;
      	Margin : 0px;
		background : #000000;
      	Margin : 0px;
      	Margin-top : 0px;
      	Margin-bottom : 0px;
      	border-width : 0px;
		   }
		   
	.header {
  		position: absolute;
  		top: 12px; 
 		left: 15px;
		padding: 0px;
 		 	}
			
	.header2 {
  		position: absolute;
  		top: 22px; 
 		left: 826px;
		padding: 0px;
 		 	}
			
	.photobox {
  		position: absolute;
  		top: 72px; 
  		left: 121px;
		padding: 0px;
 		 	}
    .smallphoto {
         position: absolute;
         top: 558px;
         left: 90px;
             }

    .footer {
         position: absolute;
         top: 550px;
         left: 750px;
             }       

	
.init_image, .inactive_class {
display:block;
border : 2px solid #000000;
}

.hover_class, #active_id {
display:block;
border : 2px solid #65ADE7;
}

	  
	  
	</style>

	
	
<script type="text/javascript">
	  
// Reference URL to large images here
  var Images = new Array(
  "img/big/1big.jpg",
  "img/big/2big.jpg",
  "img/big/3big.jpg",
  "img/big/4big.jpg",
  "img/big/5big.jpg",
  "img/big/6big.jpg",
  "img/big/7big.jpg",
  "img/big/8big.jpg", 
  "img/big/9big.jpg",
  "img/big/10big.jpg",
  "img/big/11big.jpg",
  "img/big/12big.jpg",
  "img/big/13big.jpg",
  "img/big/14big.jpg",
  "img/big/15big.jpg",
  "img/big/16big.jpg", 
  "img/big/17big.jpg",
  "img/big/18big.jpg",
  "img/big/19big.jpg", 
  "img/big/20big.jpg"
    );
  
  
function swap(el) {
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')
timgs[i_tem].id=''
el.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}

function init(){
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='init_image'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}
  
</script>
</head>

<body class="home" onLoad="init();">

<div class="header">
<a class="opacity" href="index.html"><img src="img/torrente.gif" width="280" height="27" alt=""></a></div>

<div class="header2">
<a class="opacity" href="contact.html"><img src="img/contact.gif" width="54" height="13" alt=""></a>
</div>

<img style="position: absolute; top: 45px; left=13px;" src="img/greline.gif" width="875" height="5" alt="">
<img style="position: absolute; top: 540px; left=13px;" src="img/greline.gif" width="875" height="5" alt="">
<div class="photobox">
<img galleryimg="no" name="imgMain" src="img/big/1big.jpg" width="660" height="440" alt="">
</div>

	<div class="smallphoto" id="square">
	 <table border="0" cellspacing="0" cellpadding="1" align="left" >
<!-- Reference the URL to the thumbnails as well as the copy in this section -->			 
		<tr>
<td><a class="init_image" id="first" href="#0"><img src="img/small/1small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#1"><img src="img/small/2small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#2"><img src="img/small/3small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#3"><img src="img/small/4small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#4"><img src="img/small/5small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#5"><img src="img/small/6small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#6"><img src="img/small/7small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#7"><img src="img/small/8small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#8"><img src="img/small/9small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#9"><img src="img/small/10small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#10"><img src="img/small/11small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#11"><img src="img/small/12small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#12"><img src="img/small/13small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#13"><img src="img/small/14small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#14"><img src="img/small/15small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#15"><img src="img/small/16small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#16"><img src="img/small/17small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#17"><img src="img/small/18small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#18"><img src="img/small/19small.jpg" width="30" height="20" alt=""></a></td>
<td><a class="init_image" href="#19"><img src="img/small/20small.jpg" width="30" height="20" alt=""></a></td>						    	    	    	    
		</tr>
	</table>
<noscript><br>&nbsp;<br><div align="center" style="color:white;background-color:black;">Javascript must be enabled for above gallery to function properly.</div></noscript>

</div>
<noscript>
<div align="center" style="position:absolute;top:700px;width:900px;margin:1px auto;">
<br><a href="#">To Top</a><br><a name="0"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/1big.jpg">
<br><a href="#">To Top</a><br><a name="1"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/2big.jpg">
<br><a href="#">To Top</a><br><a name="2"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/3big.jpg">
<br><a href="#">To Top</a><br><a name="3"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/4big.jpg">
<br><a href="#">To Top</a><br><a name="4"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/5big.jpg">
<br><a href="#">To Top</a><br><a name="5"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/6big.jpg">
<br><a href="#">To Top</a><br><a name="6"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/7big.jpg">
<br><a href="#">To Top</a><br><a name="7"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/8big.jpg">
<br><a href="#">To Top</a><br><a name="8"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/9big.jpg">
<br><a href="#">To Top</a><br><a name="9"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/10big.jpg">
<br><a href="#">To Top</a><br><a name="10"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/11big.jpg">
<br><a href="#">To Top</a><br><a name="11"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/12big.jpg">
<br><a href="#">To Top</a><br><a name="12"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/13big.jpg">
<br><a href="#">To Top</a><br><a name="13"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/14big.jpg">
<br><a href="#">To Top</a><br><a name="14"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/15big.jpg">
<br><a href="#">To Top</a><br><a name="15"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/16big.jpg">
<br><a href="#">To Top</a><br><a name="16"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/17big.jpg">
<br><a href="#">To Top</a><br><a name="17"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/18big.jpg">
<br><a href="#">To Top</a><br><a name="18"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/19big.jpg">
<br><a href="#">To Top</a><br><a name="19"></a><br>&nbsp;<br>&nbsp;<br>
<img galleryimg="no" src="img/big/20big.jpg">
</div></noscript>
</body>
</html>