Drop-Down Stickies

January 20, 2010

Attaching a drop-down sticky to a word or phrase in your document is an easy way to add valuable information close to the word, without obscuring it.

Code:

<?php

function start_link($text, $nextid)

  $idtext = $nextid;

?>

  <a href="javascript:void drop('<?=$idtext?>');">

  <span id="a_<?=$idtext?>"><?=$text?></span>

  </a>

  <div id="<?=$idtext?>" class="drop" style="display:none">

  <table cellspacing="0" cellpadding="0" width="170">

  <tr>

  <td valign="top" width="20">

  <a href="javascript:void close(<?=$idtext?>)">

  <img src="close.gif" border="0" />

  </a>

  </td>

  <td valign="top" width="150">

<?php

}
//--------------------

function end_link()

?>

  </td>

  </tr>

  </table>

  </div>

<?php

}
//-----------------

function link_header()

?>

  <style type="text/css">

  .drop

    padding:5px;

    font-size:small;

    background:#eeeeee;

    border:1px solid black;

    position:absolute;

  </style>

  <script type="text/javascript">

  function drop(sid)

    aobj = document.getElementById("a_" + sid);

    divobj = document.getElementById(sid);

    divobj.style.top = (aobj.offsetBottom + 10) + "px";

    divobj.style.left = (aobj.offsetLeft + 10) + "px";

    divobj.style.display = "block";

  function close(sid)

    divobj = document.getElementById(sid);

    divobj.style.display = "none";

  </script>

<?php

?>

<html>

<head>

<?php link_header(); ?>

</head>

<body>

Hello <?php start_link("my friend", 1); ?>

Jimmy <?php end_link(); ?> .How are you?

</body>
</html>

Save this code as drop-down.php

admin PHP

2 Responses to “Drop-Down Stickies”

You must be logged in to post a comment.