如何为每个单独的图像设置一个文本框？答案

【问题标题】：How to have a text box for each individual image?如何为每个单独的图像设置一个文本框？
【发布时间】：2017-04-20 22:33:48
【问题描述】：

如何更改此设置以使每个文本框仅单独显示每个图像的文本？我对这一切真的很陌生，我发现很难做我想做的事。

function showText(text) {
  document.getElementById("text").innerHTML = text;
  document.getElementById("text2").innerHTML = text;
}

function hide() {
  document.getElementById("text").innerHTML = "";
  document.getElementById("text2").innerHTML = "";
}

<LINK REL="stylesheet" TYPE="text/css" HREF="test2css.css">
<h1> ufo test page </h1>

<img src="ufo.png" id="image" onMouseOver="showText('its a ufo baby')" onMouseOut="hide();">
<div id="text" style="position:absolute; left: 100px; top: 200px;"> </div>

<br>

<img src="alien.png" id="image2" onMouseOver="showText('its a grey baby')" onMouseOut="hide();">
<div id="text2" style="position:absolute; left: 150px; top: 400px;"> </div>

【问题讨论】：

必须在 JavaScript 中吗？您应该能够单独使用 HTML 和 CSS 创建相同的效果。
您能否更具体地说明您想做什么
将元素传递给您的 showText 函数。遵循此处描述的模式：stackoverflow.com/q/6071095/215552
是的，它必须是 javascript，因为它是 uni 模块的一部分。我需要证明我在网站的某个地方使用过它。不好意思说的太含糊了，下次说的具体点。无论如何，谢谢，每一个输入都受到赞赏，因为我整天都在努力解决这个问题。 D

标签： javascript html css

【解决方案1】：

根据您的处理方式，您需要为每个文本 div 提供两个函数，以便它们可以单独显示和隐藏。

function showText(text){
document.getElementById("text").innerHTML=text;
}
function hideText(){
document.getElementById("text").innerHTML="";
}

function showText2(text){
document.getElementById("text2").innerHTML=text;
}
function hideText2(){
document.getElementById("text2").innerHTML="";
}

<LINK REL="stylesheet" TYPE="text/css" HREF="test2css.css">
<h1> ufo test page </h1>

<img src="ufo.png" id="image" onMouseOver="showText('its a ufo baby')" onMouseOut="hideText();">
<div id="text" style= "position:absolute; left: 100px; top: 200px;"> </div>

<br>

<img src="alien.png" id="image2" onMouseOver="showText2('its a grey baby')"     onMouseOut="hideText2();">
<div id="text2" style= "position:absolute; left: 150px; top: 400px;"> </div>

这是对您的代码的简单修复。如果你有很多图片，你可能想看看其他方法。

【讨论】：

这对我来说似乎是一个完美的解决方案，因为我必须在页面的某个地方运行 javascript 才能获得使用它的功劳。它是一个简单的网站模块，作为我的 GIS 硕士课程的一部分。每页永远不会超过3张图片，所以我给这个答案一个大拇指！！感谢所有做出贡献的人，如果我再问一次，我会记得更具体，你们太棒了！！ D