Here is a small package that shows how comments, like in excel, can
be placed inside and all over your web page. It is far from perfect, however it
should give you some ideas. An updated working version can be found
at http://hgsweb.de

It has been tested with Chrom 30., Safari 5.1.7, IE10, FF25, Opear 12.16

Except for the icon, all you need is included in the code below.
Just grab it execute it and have fun.

Regards

Code:
<!DOCTYPE html>
<!--
/*************************************************************************
myComment.js 1.0 Copyright (c) 2013 Heinrich Schweitzer
Contact me at hgs@hgsweb.de
This copyright notice MUST stay intact for use.

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 ***************************************************************************/

The latest version can allways be found at http://hgsweb.de


-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            #hgs_comment_div {
                width:200px; 
                border: 1px solid black;
                border-radius: 4px 4px 4px 4px;    
                background-color: #fff1aa;
            }
            #hgs_comment_text {
                background:#eef1aa;
            }

            #showCommentDiv{
                border: 1px solid black;
                padding:4px;
                border-radius: 4px 4px 4px 4px;    
                background-color: #fff1aa;   
            }
            .hgsCommImgClass{
                /** we query for this class to find all comments **/
            } 
        </style>      
    </head>
    <body style="background-image:url(../sea_mini.jpg);background-size:cover;">    
        <div  style="border-bottom:2px solid silver;padding-right:30px;padding-bottom:2px" ><p>&nbsp;</p>
            <span><a href="../index.php"> <img  src="../home.png"></a></span>
            <span style="float:right;color:slateblue; font-size:2em; font-weight:bold;"><i>PHP & JavaScript</i></span>           
        </div>
        <h1> Nice but usless :-) </h1>
        <b>comments are represented as tiny
            <img class=hgsCommImgClass src="comm.jpg" data-comment="this is a comment" >
            images </b>
        <p>
            <b>here is some text with a comment </b>  
            <img class=hgsCommImgClass src="comm.jpg" data-comment="some other comment" >

        <p>If you want to create a new comment just make a ctr-dbl-click at the position you want that
            tiny picture to appear.
            <br> To 'delete' a comment just erase the entire text inside the edit box then save.
    </body>
</html>
<script>
 (function myComment() {
    function gebi(id) {
        return document.getElementById(id);
    }
    function editComment() {
        var ds, l = 0, t = 0, parent, rt = new Date().getTime();
        // close any open comment display box
        gebi('showCommentDiv').style.display = 'none';
        // give our comment  an id here so we will find it again later
        this.id = 'comment-' + rt;
        // get absolute position of comment 

        t += this.offsetTop + this.clientHeight;
        l += this.offsetLeft + this.clientWidth;
        parent = this.offsetParent;
        while (parent.tagName !== 'BODY') {
            t += this.offsetTop;
            l += this.offsetLeft;
            parent = parent.offsetParent;
        }
        // textarea will now hold the comment
        gebi('hgs_comment_text').value = this.getAttribute("data-comment");
        // now save the comment id we assigned above 
        gebi('hgs_comment_text').setAttribute("data-comment-id", 'comment-' + rt);
        // position and show edit box now
        ds = gebi('hgs_comment_div');
        ds.style.position = 'absolute';
        ds.style.top = t + 'px';
        ds.style.left = l + 'px';
        ds.style.display = '';
    }
    function saveComment() {
        var obj, commentId;
        closeComment();
        // grab value from textarea and set it as new data-comment attribute  
        obj = gebi('hgs_comment_text');
        // here we get the comment id we saved within the edit call earlier
        commentId = obj.getAttribute("data-comment-id");
        // set new comment now
        obj.value = trim(obj.value);
        if (obj.value.length > 0) { // set comment
            gebi(commentId).setAttribute("data-comment", obj.value);
            // here could be the place to send the comment via ajax to a backend
            // in order to save it permanent
        } else { // 'delete' it
            gebi(commentId).style.display = 'none';
        }
    }
    function showComment() {
        var i, n, ds, t = 0, l = 0, that, parent, arr, br, comment;

        that = this;
        // close any other open edit comment
        gebi('hgs_comment_div').style.display = 'none';
        // grab comment
        comment = this.getAttribute("data-comment");
        // get absolute offset of comment image
        t += this.offsetTop + this.clientHeight;
        l += this.offsetLeft + this.clientWidth;
        parent = this.offsetParent;
        while (parent.tagName !== 'BODY') {
            t += this.offsetTop;
            l += this.offsetLeft;
            parent = parent.offsetParent;
        }

        // make text clean so nothing will be rendered by accident
        comment = htmlentity(comment);
        // substitute \n with <br> 
        arr = comment.split('\n');
        n = arr.length;
        for (i = 0, br = '', comment = ''; i < n; i++) {
            comment += br + arr[i];
            br = '<br>';
        }
        //
        // display and position comment 
        //
        ds = gebi('showCommentDiv');
        ds.innerHTML = '';
        ds.innerHTML = comment;
        ds.style.position = 'absolute';
        ds.style.top = t + 'px';
        ds.style.left = l + 'px';
        ds.style.display = '';
        ds.focus();
        // close comment when mouse is out
        ds.onmouseout = function() {
            ds.style.display = 'none';
        };
        // edit comment when user clicks
        ds.onclick = function() {
            editComment.bind(that)();
        };
    }
    function closeComment() {
        gebi('hgs_comment_div').style.display = 'none';
    }
    function htmlentity(value) {
        value = value.replace(/&/gi, "&amp;");
        value = value.replace(/</gi, "&lt;");
        value = value.replace(/>/gi, "&gt;");
        value = value.replace(/"/gi, "&quot;");
        value = value.replace(/'/gi, "'");
        return value;
    }
    function createCommentDiv() {
        var rt, d1, d = gebi('hgs_comment_div');
        if (d) {
            return;
        }
        //
        // rt is used to make id somehow unique 
        //
        rt = new Date().getTime();
        /*
         * a small box with a textarea to edit comment 
         */

        d = document.createElement('DIV');
        d.id = 'hgs_comment_div';
        d.style.display = 'none';
        d.style.width = 200 + 'px';
        d.innerHTML = '<span style="border:0;margin:0;padding:0;font-size:8px;"><b>Commetn</b></span>' +
                '<hr  style="margin:0;padding:0">' +
                '<textarea style="border:0;margin:0;padding:0" id="hgs_comment_text" rows=4 cols=20></textarea>' +
                '<hr style="margin:0;padding:0">' +
                '<span style="float:right;margin-right:24px;">' +
                '<input id=close' + rt + ' style="border:0;margin:0;padding:0;font-size:8px;" type="button" name=save value="Close">' +
                ' &nbsp;<input id=save' + rt + ' style="border:0;margin:0;padding:0;font-size:8px;" type="button" name=save value="Save">' +
                '</span>';
        document.body.appendChild(d);
        gebi('close' + rt).onclick = closeComment;
        gebi('save' + rt).onclick = saveComment;

        /**
         * just a div to show comment
         */

        d1 = document.createElement('DIV');
        d1.id = 'showCommentDiv';
        d1.style.display = 'none';
        document.body.appendChild(d1);
        document.ondblclick = ctrlDblClick;
    }
    function initComments(obj) {
        var el, elems, i, n;
        // locate all comments and add callbacks
        elems = obj.querySelectorAll('.hgsCommImgClass');
        n = elems.length;
        for (i = 0; i < n; i++) {
            el = elems[i];
            el.onmouseover = showComment;
            el.onclick = editComment;
        }
    }
    function ctrlDblClick(e)
    {
        var pos, img;

        if (!e) {
            e = window.event;
        }
        if (e.ctrlKey) { // create a brand new comment
            pos = get_document_offsets();
            img = document.createElement('IMG');
            img.src = "comm.jpg";
            img.setAttribute("data-comment", 'a new comment');
            img.className = 'hgsCommImgClass';
            img.onmouseover = showComment;
            img.onclick = editComment;
            img.style.position = 'absolute';
            img.style.top = e.clientY + pos.y + 'px';
            img.style.left = e.clientX + pos.x + 'px';
            document.body.appendChild(img);
        }
    }
    function get_document_offsets()
    {
        var scrOfY, scrOfX;
        if (typeof (window.pageYOffset) === 'number') {
            scrOfY = window.pageYOffset;
            scrOfX = window.pageXOffset;
        } else if (document.documentElement && !isNaN((document.documentElement.scrollLeft + document.documentElement.scrollTop))) {
            scrOfY = document.documentElement.scrollTop;
            scrOfX = document.documentElement.scrollLeft;
        }
        return {
            'x': scrOfX,
            'y': scrOfY
        };
    }

    function trim(s) {
        return s.replace(/^\s+/, "").replace(/\s+$/, "");
    }
    // we create our edit box and div to show comment
    createCommentDiv();
    // now we add call backs to  all our comments
    initComments(document);

})();
</script>