It took me almost 3 evenings to figure out. I was in the process of creating our travel website, and one issue is to show picture comment on demand. At first I used a popup window, but that requires a click, and the window needs to be closed. Then I asked Haiya about it and she suggested to use one area to show comment and use onMouseOver event to trigger. I found and solved 3 problems trying to implement it:

  1. Fixed position text box
    I’ve seen this many times, that something (text box, menu, image, etc.) stays at the same position on screen when the page is scrolled. I know it can be done by JavaScript, but when I did some searches I found a simpler way to do it using CSS, which doesn’t work with IE (surprise!). I looked around and googled “position fixed IE” (according to a forum) and found two good places: the first one isn’t very clear, and I had problem changing the fixed box position to the right side. The second one is better, but I just couldn’t get IE to work. I changed my script little by little to resemble the example, and finally realized that I need to declare the document as XHTML.
  2. Tags in text box
    In the JavaScript function as onMouseOver handler, I need to put the comment into the fixed box. I tried this first:
    document.getElementById('pictComment').firstChild.nodeValue = commentString; but it shows the tag literally. I looked into DOM references and found createTextNode method, and the result was the same. I searched numerous DOM sites and finally someone mentioned DOM vs. DHTML Object Model, and turns out that DHTML has this very simple method of innerHTML. Works like a charm.
  3. Double quote in comment to be passed as JavaScript function argument
    Simply escaping it doesn’t work. Turns out that I can use single quote to quote tag attribute (onMouseOver=’…’), and then escape the double quotes work.

Finally everything works! You may look here to see what I’m talking about.