如何为每个单独的图像拥有一个文本框

Question

如何更改此内容，以便每个文本框仅显示每个图像的文本？我真的很陌生，我发现很难做我想做的事。

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>

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

这是您代码的简单修复程序。如果您有很多图像，则可能需要查看其他这样做的方法。