PDA

View Full Version : Can this go in a *.js file rather than stay in my HTML?

AdamC
11-11-2002, 08:50 PM
I'm using javascript for a link button and would like to keep the on-page code to a minimum.

The code looks like this at the moment:


<td align="center" onMouseOver="this.style.backgroundColor='#999999';this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#5a5b6d';" onclick="window.location.href='link.html'">
<a class="heading" href="link.html">link</a>
</td>

Could I create functions, or something, that I could put into an external js file and reference when needed?
beetle
11-11-2002, 09:22 PM
Your answer is 'yes', bu first, I got a question for you: How many TD elements and pages use this rollover effect?
AdamC
11-11-2002, 09:40 PM
4 or 5
beetle
11-11-2002, 10:34 PM
Well, yes, you can put that code into a JS file, but you'll need to make functions from it. Something I like to do with stuff like this is attach the event listeners to the table<html>
<head>
<title>Table Test</title>

<style type="text/css">
table#linkTable td {
cursor: hand;
background-color: #5a5b6d;
}
</style>

<script type="text/javascript">
function tdOver(e, over) {
var td = (document.all) ? e.srcElement : e.target;
if (td.nodeType == 3) td = td.parentNode;
if (td.nodeName != "TD") return;
if (over)
td.style.backgroundColor='#999999';
else
td.style.backgroundColor='#5a5b6d';
}

function doLink(e) {
var td = (document.all) ? e.srcElement : e.target;
if (td.nodeType == 3) td = td.parentNode;
if (td.nodeName != "TD") return;
window.location.href=td.getAttribute("link");
}
</script>
</head>
<body>

<table id="linkTable" onmouseover="tdOver(event, 1)" onmouseout="tdOver(event, 0)" onclick="doLink(event)">
<tr>
<td>hello</td><td>World</td>
</tr>
<tr>
<td>hello</td><td>World</td>
</tr>
<tr>
<td>hello</td><td>World</td>
</tr>
</table>

</body>
</html>Will something like this work for you?
AdamC
11-12-2002, 09:35 AM
Yeah, I don't see why not.

Its not complete though, is it? As we need somewhere to specify the url for each link.
beetle
11-12-2002, 01:29 PM
oops...ya, got ahead of myself.<table id="linkTable" onmouseover="tdOver(event, 1)" onmouseout="tdOver(event, 0)" onclick="doLink(event)">
<tr>
<td link="page1.htm">hello</td><td link="page2.htm">World</td>
</tr>
<tr>
<td link="page1.htm">hello</td><td link="page2.htm">World</td>
</tr>
<tr>
<td link="page1.htm">hello</td><td link="page2.htm">World</td>
</tr>
</table>
joh6nn
11-12-2002, 01:51 PM
i know that i'm a bit crazy ( reads: "totally nuts" ), but why don't you just use some links, and some clever CSS? you guys seem to be re-inventing the wheel here.

<style>
#linkTable a {
display: block;
background-color: #5a5b6d;
width: 100%; height: 100%;
text-decoration: none;
}

#linkTable a:hover {
display: block;
background-color: #999999;
width: 100%; height: 100%;
text-decoration: none;
}
</style>

<table id="linkTable">
<tr>
<td><a href="page1.htm">goodbye</a></td>
<td><a href="page2.htm">cruel world</a></td>
</tr>
<tr>
<td><a href="page1.htm">goodbye</a></td>
<td><a href="page2.htm">cruel world</a></td>
</tr>
<tr>
<td><a href="page1.htm">goodbye</a></td>
<td><a href="page2.htm">cruel world</a></td>
</tr>
</table>
beetle
11-12-2002, 02:00 PM
Good solution joh6nn

I thought of that, but decided rather to show AdamC the better JS method for his woes than something completely different...That and I don't know exactly what his page looks like or what else he needs...
joh6nn
11-12-2002, 02:16 PM
well, i kinda thought that that was a lot more work, for the same effect. and if you want to throw in something more, say a color for links being clicked, then that's even more work. if you want to throw in a new color for links as they're being clicked, in CSS, then you just throw in a :active pseudo-class.

::shrug::

just my opinion.
beetle
11-12-2002, 02:35 PM
Nah, I think it's more that just your opinion. Using CSS whenever possible is definitely a good idea, regardless of your stance one's the sujbect. I just had a personal debate over what to show, being that this is the javascript forum....
AdamC
11-12-2002, 03:50 PM
Thanks - I like the look of the CSS method, and will definitely give that a go.
beetle
11-12-2002, 04:03 PM
Oh, and joh6nn, I'm not sure if some browsers require that you repeat style rules for the :hover, but IE doesn't...<html>
<head>
<title>test</title>
<style>
#linkTable {
width: 500px;
}
#linkTable a {
display: block;
background-color: #5a5b6d;
width: 100%; height: 100%;
text-decoration: none;
color: white;
padding: 3px;
}

#linkTable a:hover {
background-color: #999999;
}
</style>
</head>

<body>
<table id="linkTable">
<tr>
<td><a href="page1.htm">goodbye</a></td>
<td><a href="page2.htm">cruel world</a></td>
</tr>
<tr>
<td><a href="page1.htm">goodbye</a></td>
<td><a href="page2.htm">cruel world</a></td>
</tr>
<tr>
<td><a href="page1.htm">goodbye</a></td>
<td><a href="page2.htm">cruel world</a></td>
</tr>
</table>
</body>
</html>
joh6nn
11-12-2002, 04:14 PM
yeah, i know, i just copied and pasted real quick is all.