Display Rollover Box

[treeleaf20]

All,

I have the following code to display a box that was tagged on a photo:

  $qrygettag = "select * from tags where picture_id='$picture_id'";
  $resulttag = mysql_query($qrygettag);
  while($resultsettag = mysql_fetch_array($resulttag)){

?>
<!--
  Each "fn-area" class element contains a note, and must have a unique ID,
  the format of which can be anything/random.
-->
<?php
echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px\">";

echo "<div class=\"fn-note\">";
  echo "<div class=\"fn-note_id\" id=\"$resultsettag[tag_id]\"></div>";

?>
  <!--
   The note itself is the first DIV inside the fn-area element.
   It must have a "fn-note" class applied, and children with these classes:
  -->
  <?php
  echo "<span class=\"fn-note-content\">$resultsettag[tagged_user]</span>";
  ?>
  </div>

</div>
<?php
}
?>

 

This shows up as soon as the page loads. I don't want this to show up until that space gets rolled over on the image, how can I go about doing this?

 

Thanks in advance.

[seanlim]

i am not too sure which div you want to hide, but use the :hover pseudo class.

 

if it is the fn-note div you want to hide, write something like this in your css:

div.fn-note{
visibility:hidden;
}
div.fn-note:hover{
visibility:visible;
}