Question

html 点击图片显示文本

有个两行三列的表格，第一行是姓名，第二行对应的照片。
现在想点击图片显示姓名，用jquery怎么写？
<table class = "tab_name" border=1px solid F004>
<div class="img_name" >
<tr>
<td><div id = "pic2" ><img src="images/big1.jpg" style="width:120px;height:90px" ></div></td>
<td><div id = "pic3" ><img src="images/big2.jpg" style="width:120px;height:90px" ></div></td>
<td><div id = "pic4" ><img src="images/big3.jpg" style="width:120px;height:90px" ></div></td>
</tr>
</div>

<tr>
<td align = "center">郭沫若</td>
<td align = "center">钱学森</td>
<td align = "center">鲁迅</td>
</tr>
</table>
新手，最好附上源码

Answer 1

鼠标移动到图片上，显示文字，简单的方法是利用“title”。
例如：
<img src="/index/4.png" alt="HTML5在线制作" title="HTML5在线制作">
鼠标移动到4.png图片上时候，显示出“HTML5在线制作”

Answer 2

$(function(){
  $(".tab_name td img").click(function(){
      var index = $(this).parent("td").index();
      var name = $(".tab_name tr:eq(1) td:eq("+index+")").html();
      alert(name);
  })
})
<table class="tab_name">
  <tr>
     <td><img src="images/big1.jpg" style="width:120px;height:90px" /></td>
     <td><img src="images/big2.jpg" style="width:120px;height:90px" /></td>
     <td><img src="images/big3.jpg" style="width:120px;height:90px" /></td>
 </tr>
 <tr>
      <td align="center">郭沫若</td>
       <td align="center">钱学森</td>
       <td align="center">鲁迅</td>
  </tr>
</table>

Answer 3

$(function(){
    $("table").delegate("img","click",function(){
        var i = $(this).index("img");
        var name = $("td[align]:eq("+i+")").text();
        alert(name);
    });
});

Answer 4

按程序设计来说名字和照片放一起比较好。

追问

怎么做？

追答

名字后面跟个隐藏的图片。鼠标移到名字把图片显示，鼠标移开再隐藏。

追问

请看下我的问题，，我所要得结果是点击图片显示人名。
你只要把这个问题解决了就给你分，，别的不用你操心

追答

你TABLE里面放个DIV是干嘛的。

还有你的名字不是显示着的嘛。

 

追问

显示的那个是死的不算，，点击图片将名字提取出来，并alert出来，

追答

var name = $("..............................").html();
alert(name);

追问

能帮我加到代码里吗？？我还是个小白

追答

我现在没得工具。。。我大概写下，这样。

var tds = $(".tab_name .img_name tr td");
tds.each(function(I,o){
var td = $(o);
td.click(function(){

//todo

})
})

追问

大哥，我真是小白啊，不要玩我啊，你给个完整的源码我还要理解一下，你给个残篇，我怎么搞啊？？

追答

算了，楼下的NB，你把分给他吧。