PDA

View Full Version : show hidden links on table cell mouseover

tactik
09-06-2006, 06:53 AM
G'day, Australia calling....

I have a little script which toggles visibility of text and links with tablecell mouseovers. (the orange and blue cells)

The issue atm is that when the page loads, the text and link are visible. Is there something simple I could do to make sure that they are hidden when the page loads.

The basic idea is that the page will be empty except for an image.. onmouseover the links will appear.

Here is the entire code (please ignore the glut of styles and random placement of stuff etc... it is all for future use) hehe.
any help is much appreciated.

tactik

<HTML>
<HEAD>

<style>
.darkblue {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #272e40;
}

a {text-decoration: none; }

a.deeporange:link {color: #ffbf27; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a.deeporange:visited {color: #ffbf27; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a.deeporange:hover {color: #ffbf27; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a.deeporange:active {color: #ffbf27; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }

a.darkblue:link {color: #272E40; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a.darkblue:visited {color: #272E40; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a.darkblue:hover {background-color: #929292; color: #272E40; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a.darkblue:active {color: #272E40; font-family: Arial, Helvetica, sans-serif; font-size: 9px; }

</style>
<script language="javascript">

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

function makeObj(obj){
this.css=(n) ? eval('document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt;
this.showIt=b_showIt;
return this
}

function b_showIt(){
this.css.visibility="visible"
}
function b_hideIt(){
this.css.visibility="hidden"
}

function init(){
text1=new makeObj('divText1')
text2=new makeObj('divText2')
}

</script>

</HEAD>

<body onLoad="init()">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="200">&nbsp;</td>
<td>&nbsp;</td>
<td><div id="divText1">
<div align="center"><a href="http://www.randomsite.com/test.htm" class="deeporange">LINK</a></div>
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>


<div id="divText2">
<div align="center"><span class="darkblue">TEXT</span></div>
</div>

<p align="center">
<a href="#" onmouseover="text1.hideIt(); text2.hideIt()" class="darkblue">HIDDEN</a>
<a href="#" onmouseover="text1.showIt(); text2.showIt()" class="darkblue">VISIBLE</a>
</p>

</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>



</BODY>
</HTML>