javascript - img にテキストを動的に追加する

Question

まだいくつかの投稿を検索していますが、まだアイデアがありません。

目的: 画像 (黄色のポストイット 280px x 280px) があり、ユーザーが「テキスト」などのボタンを押した後、ポストイットにテキストを配置できるようにしたいと考えています。私は 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;
    }
};​

実稼働環境では、DOM 操作の構文がはるかに単純であることがわかっているため (上記の例とは異なり、クロスブラウザーであるため)、おそらくこれにも jQuery を使用します。

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;}