Jacka
12-15-2006, 09:45 PM
Ahoy, I need some tips.
I've been busy integrating a text version of MSN Messenger into my college website, and decided that a good way to do this would be with an iframe.
I have a working version with a checkbox to toggle the iframes visibility, but decided that it would be fun to add an accesskey password.
I would like, for example, to be able to press Alt+h, Alt+a, Alt+x to first make it visible, and then toggle the visibility with Alt+x just incase.
Here's what I've tried to make so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome to CampusNet Intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/tree.css" rel="styleSheet" type="text/css">
<link href="css/style.css" rel="styleSheet" type="text/css">
<script language="JavaScript" src="js/cooltree.js"></script>
<script language="JavaScript" src="js/gentree_nodes.js"></script>
<script language="JavaScript" src="js/gentree_format.js"></script>
<script type="text/javascript">
function do1(objCheck){
if (objCheck.checked=="0"){
document.getElementById("2").disabled;
}
else{
document.getElementById("2");
}
}
</script>
<script type="text/javascript">
function do2(objCheck){
if (objCheck.checked=="0"){
document.getElementById("3").disabled;
}
else{
document.getElementById("3");
}
}
</script>
<script type="text/javascript">
function do3(objCheck){
if (objCheck.checked=="0"){
document.getElementById("msn").style.display='none'; //hide iframe
}
else{
document.getElementById("msn").style.display='block'; //show iframe
}
}
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0">
<script language="JavaScript">
var treeName = "GenTree";
new COOLjsTree (treeName, GENTREE_NODES, GENTREE_FORMAT);
</script>
<p> </p>
<p> </p>
<table width="60%" align="center">
<tr>
<td colspan="2" align="center"><img src="images/introbanner.gif" alt="images/introbanner.gif" width="770" height="56"></td>
</tr>
<tr>
<td width="33%"> </td>
<td width="67%" align="center"> <a href="http://uranus/Clanger/ClangerLatest.doc" target="_blank"><img src="images/wykely.gif" alt="images/wykely.gif" width="300" height="210" border="0"></a>
<p></p>
<p>Powered By CampusNet3</p>
</td>
</tr>
</table>
<input id="1" style="width: 10; height: 10;" type="checkbox" accesskey="b" onclick="do1(this)">
<input id="2" style="width: 10; height: 10;" type="checkbox" accesskey="u" onclick="do2(this)">
<input id="3" style="width: 10; height: 10;" type="checkbox" accesskey="r" onclick="do3(this)">
<div id="msn" style="display:none">
<iframe src="msn.html" width="100%" height="214" name="msn" frameborder="0">
</div>
</body>
</html>
The website is ugly, but exactly the same as my college's intranet homepage.
I've been busy integrating a text version of MSN Messenger into my college website, and decided that a good way to do this would be with an iframe.
I have a working version with a checkbox to toggle the iframes visibility, but decided that it would be fun to add an accesskey password.
I would like, for example, to be able to press Alt+h, Alt+a, Alt+x to first make it visible, and then toggle the visibility with Alt+x just incase.
Here's what I've tried to make so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome to CampusNet Intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/tree.css" rel="styleSheet" type="text/css">
<link href="css/style.css" rel="styleSheet" type="text/css">
<script language="JavaScript" src="js/cooltree.js"></script>
<script language="JavaScript" src="js/gentree_nodes.js"></script>
<script language="JavaScript" src="js/gentree_format.js"></script>
<script type="text/javascript">
function do1(objCheck){
if (objCheck.checked=="0"){
document.getElementById("2").disabled;
}
else{
document.getElementById("2");
}
}
</script>
<script type="text/javascript">
function do2(objCheck){
if (objCheck.checked=="0"){
document.getElementById("3").disabled;
}
else{
document.getElementById("3");
}
}
</script>
<script type="text/javascript">
function do3(objCheck){
if (objCheck.checked=="0"){
document.getElementById("msn").style.display='none'; //hide iframe
}
else{
document.getElementById("msn").style.display='block'; //show iframe
}
}
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0">
<script language="JavaScript">
var treeName = "GenTree";
new COOLjsTree (treeName, GENTREE_NODES, GENTREE_FORMAT);
</script>
<p> </p>
<p> </p>
<table width="60%" align="center">
<tr>
<td colspan="2" align="center"><img src="images/introbanner.gif" alt="images/introbanner.gif" width="770" height="56"></td>
</tr>
<tr>
<td width="33%"> </td>
<td width="67%" align="center"> <a href="http://uranus/Clanger/ClangerLatest.doc" target="_blank"><img src="images/wykely.gif" alt="images/wykely.gif" width="300" height="210" border="0"></a>
<p></p>
<p>Powered By CampusNet3</p>
</td>
</tr>
</table>
<input id="1" style="width: 10; height: 10;" type="checkbox" accesskey="b" onclick="do1(this)">
<input id="2" style="width: 10; height: 10;" type="checkbox" accesskey="u" onclick="do2(this)">
<input id="3" style="width: 10; height: 10;" type="checkbox" accesskey="r" onclick="do3(this)">
<div id="msn" style="display:none">
<iframe src="msn.html" width="100%" height="214" name="msn" frameborder="0">
</div>
</body>
</html>
The website is ugly, but exactly the same as my college's intranet homepage.