個々の画像ごとにテキストボックスを表示するにはどうすればよいですか？

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のための2つの機能が必要になります。

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>

これはあなたのコードに簡単な修正です。たくさんの画像がある場合は、これを行う他の方法を見たいかもしれません。