[Javascript] How to separate the href + V8 moment

Thu Aug 11 13:46:09 CDT 2005

Triche, thanks for taking the time and providing the explanations.  
Everything is working as intended and the final code is below.

As I look at the code though, I think I need to figure out how to  
reduce the CSS ids. I can understand the need to assign #t1, #t2,  
#t3, etc for the 'a' tags since each one needs to have a unique  
background image, but I don't think I should have to do the same  
thing for a:hover, .selected and .notselected. Seems like I should be  
able to define those only once.

Anyway, I realize this has now turned to a CSS question, but the  
final code got me thinking.

Scott

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var Ary=new Array();
var firstSelected;

window.onload = function() {
firstSelected = document.getElementById('first');
firstSelected.className = "selected";
Ary[0] = firstSelected;
}
function showPic (obj) {
if (!obj.set){
      obj.set=true;
      Ary[Ary.length]=obj;
     }
     for (i=0;i<Ary.length;i++){
      Ary[i].className='notselected';
     }
obj.className='selected';
     if (document.getElementById) {
         document.getElementById('placeholder').src = obj.href;
         return false;
         } else {
         return true;
     }
}
</script>
<style type="text/css">
#t1 a {width:43px;height:43px;background: url("imgs/ 
seriesthumbs01.jpg") 0 0 no-repeat;display:block;}
#t2 a {width:43px;height:43px;background: url("imgs/ 
seriesthumbs02.jpg") 0 0 no-repeat;display:block;}
#t3 a {width:43px;height:43px;background: url("imgs/ 
seriesthumbs03.jpg") 0 0 no-repeat;display:block;}
#t4 a {width:43px;height:43px;background: url("imgs/ 
seriesthumbs04.jpg") 0 0 no-repeat;display:block;}

#t1 a:hover, #t2 a:hover, #t3 a:hover, #t4 a:hover {
     background-position: 0 -53px;
}

#t1 .selected, #t2 .selected, #t3 .selected, #t4 .selected {
     background-position: 0 -53px;
}

#t1 .notselected, #t2 .notselected, #t3 .notselected, #t4 .notselected {
     background-position: 0 0;
}
</style>
</head>
<body>
<div id="t1"><a onclick="return(showPic(this))" href="imgs/series/ 
series01.jpg" id="first"></a></div>
<div id="t2"><a onclick="return(showPic(this))" href="imgs/series/ 
series02.jpg"></a></div>
<div id="t3"><a onclick="return(showPic(this))" href="imgs/series/ 
series03.jpg"></a></div>
<div id="t4"><a onclick="return(showPic(this))" href="imgs/series/ 
series04.jpg"></a></div>
<img src="series01.jpg" id="placeholder" />
</body>
</html>

_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript