So being someone with a decent knowledge of css and html, and learning php, I've found myself looking at some of the things that javascript can do and found them to be something that I'd love to impliment into my site.

 

What I'm trying to do is create a basic clan roster on my site, where each member has one row in a table, with several fields, and on clicking this persons row, it takes them to their main profile page. The problem isnt with getting the tablerow background to change on mouseover, nor with linking to a page. I've tried my best and managed to hurdle these as a javascript newbie. The problem I face however, is that the Javascript seems to be wanting to add a border around each cell, which yes I want, but not like its doing as its not the effect im looking for. I'm rather looking to create the border using css and leave the Javascript to simply take care of the row link, and the rwo background on mouse over.

 

So heres what I'm currently seeing with my current code [Link], when instead of a 2pixel black border seperating the cells/background images, I'm looking for the 1 pixel black cell divider that I have in the main profile that can be seen here [Link] (yes its not appearing around some cells because they contain no data cause the ranking parser is down but thats not the problem - you hopefully see what I'm looking to achieve). I dont see why its not possible, but similarly, I dont see why Javascript is doing this.

 

Heres the code im using (its also viewable through page source)

 

Script + Style

<script language="JavaScript" type="text/javascript">
<!--
img=new Image();
img.src='images/bar_3.PNG';

function CngBG(obj,nc){
obj.nc=obj.className;
obj.className=nc;
obj.onmouseout=function(){ this.className=this.nc; }
}

function DoNav(theUrl)
{
document.location.href = theUrl;
}

//-->
</script>

<style type="text/css">
<!--
.td1 {
 background-Image:url('images/bar_1.PNG');
}
.bg2 {
 background-Image:url('images/bar_3.PNG');
}

-->
</style>

 

Table - Several rows to show whats up

<table border='0' cellpadding='5' width='100%' class="tableborder1">
			<tr class="td1" onmouseover="CngBG(this,'bg2');" onclick="DoNav('profile.html?user=Qwibble');" >
			<td class='style3' width='20' height='34'>
			<center><img src='ranks/20.gif' title='General of the Army' /></centeR>
			</td>
			<td class='style3' height='34'>
			Name
			</td>
			<td class='style3' height='34'>
			Joined : xx/xx/xx
			</td>
			<td class='style3' height='34'>
			Member
			</td>
			<td class='style3'  width='5' height='34'>
			<img src='images/flags/uk.gif' title='United Kingdom' />
			</td>
			</tr>
			<tr class="td1" onmouseover="CngBG(this,'bg2');" onclick="DoNav('profile.html?user=Qwibble');" >
			<td class='style3' width='20' height='34'>
			<center><img src='ranks/20.gif' title='General of the Army' /></centeR>
			</td>
			<td class='style3' height='34'>
			Name
			</td>
			<td class='style3' height='34'>
			Joined : xx/xx/xx
			</td>
			<td class='style3' height='34'>
			Member
			</td>
			<td class='style3'  width='5' height='34'>
			<img src='images/flags/uk.gif' title='United Kingdom' />
			</td>
			</tr>
			<tr class="td1" onmouseover="CngBG(this,'bg2');" onclick="DoNav('profile.html?user=Qwibble');" >
			<td class='style3' width='20' height='34'>
			<center><img src='ranks/20.gif' title='General of the Army' /></centeR>
			</td>
			<td class='style3' height='34'>
			Name
			</td>
			<td class='style3' height='34'>
			Joined : xx/xx/xx
			</td>
			<td class='style3' height='34'>
			Member
			</td>
			<td class='style3'  width='5' height='34'>
			<img src='images/flags/uk.gif' title='United Kingdom' />
			</td>
			</tr>
			<tr class="td1" onmouseover="CngBG(this,'bg2');" onclick="DoNav('profile.html?user=Qwibble');" >
			<td class='style3' width='20' height='34'>
			<center><img src='ranks/20.gif' title='General of the Army' /></centeR>
			</td>
			<td class='style3' height='34'>
			Name
			</td>
			<td class='style3' height='34'>
			Joined : xx/xx/xx
			</td>
			<td class='style3' height='34'>
			Member
			</td>
			<td class='style3'  width='5' height='34'>
			<img src='images/flags/uk.gif' title='United Kingdom' />
			</td>
			</tr>
			<tr class="td1" onmouseover="CngBG(this,'bg2');" onclick="DoNav('profile.html?user=Qwibble');" >
			<td class='style3' width='20' height='34'>
			<center><img src='ranks/20.gif' title='General of the Army' /></centeR>
			</td>
			<td class='style3' height='34'>
			Name
			</td>
			<td class='style3' height='34'>
			Joined : xx/xx/xx
			</td>
			<td class='style3' height='34'>
			Member
			</td>
			<td class='style3'  width='5' height='34'>
			<img src='images/flags/uk.gif' title='United Kingdom' />
			</td>
			</tr>
			<tr class="td1" onmouseover="CngBG(this,'bg2');" onclick="DoNav('profile.html?user=Qwibble');" >
			<td class='style3' width='20' height='34'>
			<center><img src='ranks/20.gif' title='General of the Army' /></centeR>
			</td>
			<td class='style3' height='34'>
			Name
			</td>
			<td class='style3' height='34'>
			Joined : xx/xx/xx
			</td>
			<td class='style3' height='34'>
			Member
			</td>
			<td class='style3'  width='5' height='34'>
			<img src='images/flags/uk.gif' title='United Kingdom' />
			</td>
			</tr>
			</table>

 

These cells in the future will be automatically updated from a databse and a ranking parser, but for now I'm looking to get the basics working. Cheers for anyone that can give some help, and explain so as to shed some light on this. I'm always open to learning new stuff, and since I'm a somewhat new person to Javascript, would be great to learn where the error is.

 

Qwibble~

Hmm, or is CSS the way to go with its fast loading, and less chances of the user not being able to see it?

Dont worry, I've come up with something different to do it. I'll post my solution/ new problems , as I go. Atm its looking good, but I've run into a slightly different problem.