Something like the following will do the trick.

The code is nasty hack, and is definitely not cross-browser compatible... it should, however, give you an idea of how to implement this in general.

-David.

Working (firefox only) example.

  <html>
    <head>
      <script type="text/javascript">
  
        // attach the event handler 'fn' to the node 'obj'
        // so that it fires when event 'type' occurs.
        function addEvent( obj, type, fn ) {
          if ( obj.attachEvent ) { 
            obj['e'+type+fn] = fn; 
            obj[type+fn] = function(){
              obj['e'+type+fn]( window.event );
            };
            obj.attachEvent( 'on'+type, obj[type+fn] );
          } else
            obj.addEventListener( type, fn, false );
        }
  
        {
          var setupDone = false;
          var pointer, textnode;
          var offsets = {left: 0, top: 0};
          var lock = 0;
  
          // starting at node n, find a text (nodeType == 3) node 
          // whose nodeValue matches re
          var matching_textnodes = function(n,re) {
            if (!n) n = document.body;
            var subs, nodes = [];
            for (var c=0; c<n.childNodes.length; c++) {
              if (n.childNodes[c].nodeType == 3) {
                if (re.test(n.childNodes[c].nodeValue)) 
                  nodes.push(n.childNodes[c]);  
              }
              if (n.childNodes[c].nodeType == 1) {
                subs = matching_textnodes(n.childNodes[c], re);
                for (var i=0; i<subs.length; i++) 
                  nodes.push(subs[i]);
              }
            }
            return nodes;
          };
  
          // find text in the page, split it out, wrap in SPAN tag
          var isolate_text = function(text) { 
            try {
              var mnodes = matching_textnodes(
                document.body, new RegExp(text));
              if (mnodes.length < 1) return null;
              var found = mnodes[0];
              var sre = new RegExp('^(.*?)('+text+')(.*)$');
              var matches = sre.exec(found.nodeValue);
              var before = document.createTextNode(matches[1]);
              var after  = document.createTextNode(matches[3]);
              var target = document.createTextNode(matches[2]);
              var wrap   = document.createElement('SPAN');
              wrap.appendChild(target);
              var pnode = found.parentNode;
              pnode.insertBefore(before,found);
              pnode.insertBefore(wrap,found);
              pnode.insertBefore(after,found);
              pnode.removeChild(found);
              return wrap;
            } catch(e) {
              alert('ERROR: '+e);
            }
          };
  
          // get the absolute position of the node obj
          var findPos = function (obj) {
            var curleft = curtop = 0;
            if (obj.offsetParent) {
              curleft = obj.offsetLeft
              curtop = obj.offsetTop
              while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
              }
            }
            return [curleft,curtop];
          };
  
          // get the computed value of style attribute 
          // styleProp for node x
          var getStyle = function(x,styleProp) {
            if (x.currentStyle) 
              var y = x.currentStyle[styleProp];
            else if (window.getComputedStyle) var y = 
              document.defaultView.getComputedStyle(x,null)
                      .getPropertyValue(styleProp);
            return y;
          };
  
          // build the "pointer" HTML, find "FOOBAR" text in 
          // the page, isolate it, compute "pointer" offsets.
          var setupPointer = function() {
            try {
              pointer = document.createElement('DIV');
              var text = document.createTextNode('====>');
              pointer.appendChild(text);
              document.body.appendChild(pointer);
              pointer.style.fontSize = '35px';
              pointer.style.color = 'green';
              pointer.style.fontWeight = 'bold';
              pointer.style.position = 'absolute';
              textnode = isolate_text('FOOBAR');
              offsets.left = 
                parseInt(getStyle(pointer, 'width'), 10);
              offsets.top = 
                (parseInt(getStyle(pointer, 'height'), 10) / 2) - 10;
            } catch(e) {
              alert('ERROR: '+e);
            }
            setupDone = true;
          };
  
          // position the the "pointer" to point to 
          // the "FOOBAR" text node.
          function positionPointer() {
            if (lock == 1) return;
            lock = 1;
            if (!setupDone) setupPointer();
            var pos = findPos(textnode);
            pointer.style.left = pos[0] - offsets.left;
            pointer.style.top  = pos[1] - offsets.top;
            lock = 0;
          }
        }
  
        // RE-COMPUTE POINTER POSITION FOR ALL THESE EVENT-TYPES
        addEvent(window, 'load', positionPointer);
        addEvent(window, 'resize', positionPointer);
        addEvent(window, 'DOMContentLoaded', positionPointer);
  
      </script>
    </head>
    <body>
      <table width="80%">
        <tr>
          <td valign="top" align="left">asdf asdfa asdf asdsd asdfa 
           dfas asdfa sdf asdf asdf asdf asdf asasdf asdfa asdf asasd 
           asdfa dfas asdfa sdf asdf asdf asdf asdf asasdf asdfa asdf 
           asdfsd asdfa dfas asdfa sdf asdf asdf asdf asdf asasdf afa
           asdf asdfasd asdfa dfas asdfa sdf asdf asdf asdf asdf asdf 
           asdfa asdf asdfasd asdfa dfas asdfa sdf asdf asdf adf asdf 
           asasdf asdfa asdf asdfasd asdfa dfas asdfa sdf asdf asdf 
           asdf asdf as
          </td>
          <td valign="top" align="left">asdf asdfa asdf asdfasd 
           asdfa dfas asdfaasdf asdfa asdf asdfasd asdfa dfas asd
           falkj lkjlkjasdflkj lkj asdflkj lkjas FOOBAR asdflkj
           asdlkjsadfk asdfasdf asdfa asdf asdfasd asdfa dfas asdfa
           sdf asdf asdf asdf asdf asadf asdfa asdf asdsd asda dfas
           asdfa sdf asdf asdf asdf asdf asasdf asdfa asdf asdfasd 
           asdfa dfas asdfa sdf asdf asdf asdf asdf asasdf asdfa 
           asdf asdfasd asdfa dfas asdfa sdf asdf asdf asdf asdf 
           asasdf asdfa asdf asdfasd asdfa dfas asdfa sdf asdf asdf
           asdf asdf asasdf asdfa asdf asdfasd asdfa dfas asdfa sdf
           asdf asdf asdf asdf as
          </td>
        </tr>
      </table>
    </body>
  <html>

[download]

In reply to Re^8: Position on Web Page by erroneousBollock
in thread Position on Web Page by user2000

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.