javascript - 在 img 上动态添加文本

Question

我仍然在一些帖子中搜索过，但我还没有想法。

目标：我有一张图片（黄色便利贴 280 像素 x 280 像素），现在，我希望能够在用户按下按钮后在便利贴上放置文本，例如“文本”。我对 html 很坚定，但对 javascript 却不是。非常感谢！马丁

Answer 1

我就是这样做的。

使用带有便利贴图像的 div 作为背景，该背景具有用于便笺的子 div。

<div class='post-it'>
    <div class="note">
    </div>
</div>​

div.note可以轻松定位，以免与图像重叠。

.post-it {
    background-image: url('http://alternatewrites.com/wp-content/uploads/2012/06/post-it-note-with-a-pin.jpg');
    background-repeat: no-repeat;
    width: 321px;
    height: 321px;
    position: relative;
}
.note {
    position: absolute;
    top: 90px;
    right: 30px;
    bottom: 30px;
    left: 60px;
    overflow: auto;
}

然后 JavaScript 非常简单：

// Execute after DOM has loaded
window.onload = function() {
    var postIt = document.getElementsByClassName('post-it'),
        addTextToNote = function () {
            //"this" is the textarea because the function is bound to the textarea;
            var note = this.parentNode,
                postIt = note.parentNode;
            note.removeChild(this);
            note.innerText = this.value;
            postIt.onclick = addTextArea;
        },
        addTextArea = function addTextArea() {
            //"this" is the div with class "post-it" because the function is bound to it;
            var note = this.getElementsByClassName('note'),
                t = null,
                i = 0;
            for (i = 0; i < note.length; i += 1) {
                t = document.createElement('textarea');
                t.rows = 10; // 10 rows and 25 columns is about
                t.cols = 25; // the correct size for the image
                t.value = note[i].innerText; // add any existing text
                t.onblur = addTextToNote;
                note[i].appendChild(t); // add textarea to note
                this.onclick = null; // remove click handler to prevent multiple click problems
                t.focus(); // give focus to the textarea
            }
        },
        i = 0;
    for (i = 0; i < postIt.length; i += 1) {
        postIt[i].onclick = addTextArea;
    }
};​

请注意，在生产环境中，我也可能会为此使用 jQuery，因为我发现 DOM 操作的语法要简单得多（而且它是跨浏览器的，与上面的示例不同）。

这是一个 jsFiddle 演示：http: //jsfiddle.net/gWf5Z/

Answer 2

对于您的图像，我建议将其放入 div 元素中，以便更容易附加。使用 javascript 我会执行以下操作：

addText(){
    var ele = document.createElement("p");
    ele.appendChild(document.createTextNode('your text'));
    document.getElementById('yourDiv').innerHTML(ele);

}
document.getElementById('yourButton').addEventListener('click', addText(), false);

据我所知，这应该是正确的。有很多更简单的方法。例如，这是一个 CSS 替代方案。

HTML

<div id="wrapper">
    <p>text</p>
</div>

CSS

#wrapper {background-image:url('post-it.png');}
#wrapper > p {display:none;}
#wrapper > img:hover p{display:block;}