htmlページのコードビハインド内にvoidパラメータを埋め込む

Question

ユーザーが画像の上を移動したときにテーブルセルを表示させようとしています（基本的にその画像に関するツールチップを表示しています） 。

HTML & CSS

body{ 
 
    background-image: url(Images/Background_Home.jpg); 
 
    background-size: contain; 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
.HomeNavImage:hover{ 
 
    opacity: .5; 
 
} 
 
.HomeNavImage{ 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
} 
 
.HomeNav{ 
 
    height: 15.7vh; 
 
    padding: 0; 
 
} 
 
#Tooltip1,#Tooltip2,#Tooltip3,#Tooltip4,#Tooltip5,#Tooltip6{ 
 
    display: none; 
 
}

<table id="HomeNavTable"> 
 
     <tr><td class="HomeNav"><a href="Home.aspx"><img class="HomeNavImage" src="Images/Home.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(1)" runat="server" /></a></td><td id="Tooltip1">Home</td></tr> 
 
     <tr><td class="HomeNav"><a href="Forum.aspx"><img class="HomeNavImage" src="Images/Forum.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(2)" runat="server" /></a></td><td id="Tooltip2">Forum</td></tr> 
 
     <tr><td class="HomeNav"><a href="Project.aspx"><img class="HomeNavImage" src="Images/Project.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(3)" runat="server" /></a></td><td id="Tooltip3">Project</td></tr> 
 
     <tr><td class="HomeNav"><a href="Contact.aspx"><img class="HomeNavImage" src="Images/Contact.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(4)" runat="server" /></a></td><td id="Tooltip4">Contact</td></tr> 
 
     <tr><td class="HomeNav"><a href="Store.aspx"><img class="HomeNavImage" src="Images/Store.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(5)" runat="server" /></a></td><td id="Tooltip5">Store</td></tr> 
 
     <tr><td class="HomeNav"><a href="Patreon.aspx"><img class="HomeNavImage" src="Images/Patreon.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(6)" runat="server" /></a></td><td id="Tooltip6">Donate</td></tr> 
 
    </table>

コードは

private void DisplayTooltip(int ID){ 
     HtmlTableCell Tooltip = new HtmlTableCell(); 
     Tooltip.ID = "Tooltip" + ID; 
     Tooltip.Style.Add("display", "block"); 
} 

後ろに私はIDの文字列の代わりに、int型を使用してみましたが、それはそれを解決しません。 HTMLで 'onmouseover'を探します。

Answer 1

onmouseoverは、クライアントサイドのイベント、javascriptです。コードをjsの後ろに移動できますか？できれば、これはそれを行う必要があります。どれも完全にページからツールチップを削除しません：ディスプレイがあればなし：

...onmouseover="DisplayTooltip(4)" 

function DisplayTooltip(tooltipNum) { 
    var ele = document.getElementById("Tooltip" + tooltipNum): 
    ele.style.display = "block"; 
} 

はあなたではなく、ディスプレイの「可視性」を使用する必要があります。私はそれが大丈夫だと思う。