javascript - 画像にテキストを作成する

Question

私がやろうとしているのは、Y[0]をテキストではなく画像にすることです。今のところ、それは単なるテキストとしてのリンクであり、画像ではありません。

<html>
<head>
<script type="text/javascript">
function changeContent(){
    var x=document.getElementById('myTable').rows
    var y=x[0].cells
    y[0].innerHTML = "http://www.handicappedpets.com/wizards/img/wwmeasure2B.jpg"
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>d</td>
<td>d</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="Change content">
</form>
</body>

</html>

score 2 · Accepted Answer

You are just setting the html of the cell to some text which happens to be a url. You need to create an img tag inside the cell:

y[0].innerHTML = '<img src="http://www.handicappedpets.com/wizards/img/wwmeasure2B.jpg" />'

score 0 · Accepted Answer

これで試してください：

y[0].innerHTML = '<img src="http://www.handicappedpets.com/wizards/img/wwmeasure2B.jpg" alt="Remove Criteria" />'

score 0 · Accepted Answer

どうですか

y[0].innerHTML = '<img src="http://www.handicappedpets.com/wizards/img/wwmeasure2B.jpg">';

score 0 · Accepted Answer

画像ソースをタグ、このように

y[0].innerHTML = "<img src='http://www.handicappedpets.com/wizards/img/wwmeasure2B.jpg'/>"

score 0 · Accepted Answer

JavaScript を使用して画像を動的に作成し、セルに追加できます。

window.changeContent = function () {
    var x = document.getElementById('myTable').rows,
        cell = x[0].cells[0],
        img = document.createElement('img');

    img.setAttribute('src', 'http://www.handicappedpets.com/wizards/img/wwmeasure2B.jpg');

    cell.innerHTML = '';
    cell.appendChild(img);

}

http://jsfiddle.net/C7KZu/

score -1 · Accepted Answer

You can't do that. What you can do is put that URL inside an tag and insert that, or create a new Image() object, set the src property of it and insert it into the DOM.

javascript - 画像にテキストを作成する

6 に答える 6

Related

Reference