Question

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

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>

的JavaScript

function show(myform) {
    var string = "";

    string += myform.fn.value;

    document.getelementbyid("displayhere").innerhtml = string
    return false;
}

当鼠标悬停在图像上时，我应该怎么做显示的名字输入？

Answer 1

JavaScript方法区分大小写，这就是您的代码目前无法正常工作的原因。让自己的生活更轻松，并提供您的图像，显示和形成id以便您可以定位它们。然后为您的图像添加侦听器，将鼠标悬停时将字符串放在显示中，并在鼠标输出时清空显示：

<强> HTML

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

<强>的JavaScript

var img = document.getElementById('sampleimage'),
    disp = document.getElementById('displayhere'),
    frm = document.getElementById('myform');

img.addEventListener('mouseover', function () {
    var string = frm.fn.value;
    disp.innerHTML = string;
});
img.addEventListener('mouseout', function () {
    disp.innerHTML = '';
});

JSFiddle

Answer 2

试试这个

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

Answer 3

试试这个

<强> HTML

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

<强>的javascript

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

显示输入名称onmouseover

3 个答案: