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:
- Fixed position text box
- Tags in text box
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.
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.