Javascript 在MouseOver上显示输入名称

我想在图像悬停时显示输入名称，如何使用以下示例代码：

HTML

<img src="imagesample.jpg" height="150px" width="150px" />

<form>
    first name: <input type="text" name="fn">
    <button onclick="return show(this.form)">send</button>
</form>

<table border="1px" style="width: 350px; height: 250px;">
    <tr>
        <td>
            <p id="displayhere"></p>
        </td>
    </tr>
</table>

<img id="sampleimage" src="imagesample.jpg" height="150px" width="150px" />
<form id="myform">first name:
    <input type="text" name="fn">
    <button onclick="return show(this.form)">send</button>
</form>
<table border="1px" style="width: 350px; height: 250px;">
    <tr>
        <td>
            <p id="displayhere"></p>
        </td>
    </tr>
</table>

---

当我将鼠标移到图像上时，应该如何处理firstname输入以显示？

JavaScript方法区分大小写，这就是代码当前无法工作的原因。让自己的生活更轻松，并提供图像、显示和表单

id

s，以便您可以瞄准它们。然后将侦听器添加到图像中，将字符串放置在鼠标上方的显示中，并在鼠标离开时清空显示：

HTML

<img src="imagesample.jpg" height="150px" width="150px" />

<form>
    first name: <input type="text" name="fn">
    <button onclick="return show(this.form)">send</button>
</form>

<table border="1px" style="width: 350px; height: 250px;">
    <tr>
        <td>
            <p id="displayhere"></p>
        </td>
    </tr>
</table>

<img id="sampleimage" src="imagesample.jpg" height="150px" width="150px" />
<form id="myform">first name:
    <input type="text" name="fn">
    <button onclick="return show(this.form)">send</button>
</form>
<table border="1px" style="width: 350px; height: 250px;">
    <tr>
        <td>
            <p id="displayhere"></p>
        </td>
    </tr>
</table>

试试这个

<script>

function onHover()
{
    show();
}
function show() {
    var myform=document.getElementByid("fromid")
var string = "";

string += myform.fn.value;

document.getElementByid("displayhere").innerhtml = string
return false;
}
</script>
<img src="imagesample.jpg" onmouseover="onHover();" height="150px" width="150px" />

<form id="fromid">
first name: <input type="text" name="fn">
<button onclick="return show(this.form)">send</button>
</form>

<table border="1px" style="width: 350px; height: 250px;">
<tr><td><p id="displayhere"></p></td></tr>
</table>

函数onHover（）
{
show（）；
}
函数show（）{
var myform=document.getElementByid（“fromid”）
var字符串=”；
字符串+=myform.fn.value；
document.getElementByid（“displayhere”）.innerhtml=string
返回false；
}
名字：
发送

像这样试试

html

<img src="imagesample.jpg" height="150px" width="150px" onmouseover="show()" onmouseout="normal()" />

---

document.getelementbyid（“displayhere”）.innerhtml=string；缺少分号…@Ashish您无法通过仅添加分号来修复该特定行；）。我只是先观察它sight@Ashish-与C/C++/C#等语言不同，javascript在语句末尾不需要分号。我同意你的观点，但这并不能真正解决OP的问题，不是吗？@OvidiuIacomi你是对的，我应该在阅读时多加注意。进行了更新。

function show()
{
document.getElementById( 'displayhere' ).style.display = 'block';
}
function normal()
{
document.getElementById( 'displayhere' ).style.display = 'none';
}