CSS/JS rollover issue on load

Rollo Tamasi · 08-06-2006 11:27am #1

I have a little issue with the code below. When a user rolls over a link a description of the link should appear within a div just under it, however, on page load all the divs get displayed to the user. How can i change it so that on load nothing appears untill the user rolls over the links. Included is a screen shot of the problem. It's probably a fairly simple issue to resolve but there are a lot more able folk out there with regards to CSS/JS over myself.

JS Code
[html]
<script language="JavaScript">
function setVisibility(id, visibility) {
document.all[id].style.display = visibility;
}

</script>
<body >
<a href='tutorial.php' onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');">Tutorial Page</a><br>
<a href='logout.php' onMouseOver="setVisibility('sub2', 'inline');" onMouseOut="setVisibility('sub2','none');">Logout</a><br>
<div id="sub1">go place 1</div>
<div id="sub2">go place 2</div>[/html]
CSS Code

sub1 {

display: none;
}

sub2 {

display: none;
}#sub1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
    position: absolute;
    left: 358px;
    top: 83px;


}#sub2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
    position: absolute;
    left: 358px;
    top: 83px;
}

forbairt · 08-06-2006 11:31am

looks like its a problem with id's and classes ...

your first bit of CSS code should include
#sub1

not just sub1 {display: none;}

and similar for sub2 ...

That said I've not verified that ...

#sub1 { display: none; }
#sub2 { display: none; }

BizzyC · 08-06-2006 12:05pm

use the visibility attribute.
set visibility:hidden for #sub1&2, and toggle them to visible when you want them displayed.

Rollo Tamasi · 08-06-2006 12:43pm

i have attempted this code but it isn't working

#sub2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
    position: absolute;
    left: 358px;
    top: 83px;
     visibility: hidden;
    }
    #sub2:hover {
    position: absolute;
    visibility: visbile;    
    left: 358px;
    top: 83px;

}

forbairt · 08-06-2006 12:55pm

ignored my suggestion ?

<html>
<script type="text/javascript">
function setVisibility(id, visibility) 
{ 
  if(document.getElementById)
  {
    x = document.getElementById(id);
    currentClass = x.className;
    x.setAttribute("style","display:"+visibility+";");
  }
} 
</script>
<style type="text/css">

#sub1 { display: none; background-color: #F00;}
#sub2 { display: none; background-color: #00F;}

</style>
<body
><a href='tutorial.php' onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');">Tutorial Page</a><br>
<a href='logout.php' onMouseOver="setVisibility('sub2', 'inline');" onMouseOut="setVisibility('sub2','none');">Logout</a><br>
<div id="sub1">go place 1</div>
<div id="sub2">go place 2</div>
</body>
</html>

Rollo Tamasi · 08-06-2006 1:59pm

error9 wrote:

ignored my suggestion ?

thanks

i was wondering why your coding wasn't working but i forgot i was importing the syles from the external sheet as well as defining the styles within the page! wooops

CSS/JS rollover issue on load

Comments