0

例としてJSfiddleがあります http://jsfiddle.net/pAQTn/8/

私が欲しいのは、divが画像に隣接することであり、画像をクリックするとテキストが表示されるようにしたいもう1つのことは、1-4からクリックした画像をテキストに含めることですこれは私のHTMLです

<table border="1">
<tr>
  <td>
      <img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100" />
  </td>

  <td>
<img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
  </td>
</tr>
<tr>
  <td>
 <img onlick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
  </td>
  <td>
 <img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
</td>
</tr>
</table>
<div id="txtarea">
    </div>

これは私のCSSです

img:hover{
     border:1px solid #0000ff;
    width:120px;
    height:120px;        
}

これは私のJavaScriptです

function imgclick() {        
    txtarea.innerhtml="You clicked the baby no :";
}
4

2 に答える 2

3

jsフィドル

これを試して：

function imgclick(e) {
    src = (e.parentNode.parentNode.rowIndex * 2) + e.parentNode.cellIndex + 1;
    txtarea = document.getElementById('txtarea');
    txtarea.innerHTML = "You clicked the baby no :" + src;
}

テキスト番号に何を表示したいのかわかりません。私の例ではonclick = "imgclick(this)"、クリックした画像に関数を接続します。
この例では、テーブルの位置から img nr を取得します。

また、注意してください：あなたのHTMLでは、3番目の画像にonlickはonclick

于 2013-07-05T08:14:16.970 に答える
0

onclick="imgclick(1)"、、などの中に数字を入れるだけでonclick="imgclick(2)"、関数にパラメーターを追加します

function imgclick(num) {
    alert("hey");
    txtarea.innerHTML="You clicked the baby no "+num;
}
于 2013-07-05T08:56:57.620 に答える