如何爲每個圖像創建一個文本框？

如何更改此選項，以便每個文本框僅顯示每個圖像的文本個別？我對這一切都非常陌生，我發現很難做到我想要的。如何爲每個圖像創建一個文本框？

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>

來源

2017-04-20 David Laverty

它必須在JavaScript中嗎？您應該可以單獨使用HTML和CSS創建相同的效果。 – Brian

你可以更具體瞭解你想做什麼 –

將元素傳遞給你的'showText'函數。按照這裏描述的模式：http://stackoverflow.com/q/6071095/215552 –

對於你走近這個方式，你需要爲每一個文字的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>

這是一個簡單的解決你的代碼。如果你有很多圖片，你可能想看看其他的方法。

來源

2017-04-20 14:06:43

這對我來說似乎是一個完美的解決方案，因爲我必須在某個頁面上運行JavaScript才能獲得使用它的功勞。它是我作爲GIS主人的一部分的一個簡單的網站模塊。每頁永遠不會超過3張圖片，所以我給這個答案一個大拇指！感謝所有貢獻的人，如果我再次問過，我會記得更具體，你們是偉大的！ d –

如何爲每個圖像創建一個文本框？

回答

相關問題