以下代碼僅執行顏色更改。我從來沒有看到過圖像。我正在 Visual Studio 2017 中用 C# ASP.Net 編寫此內容基本上嘗試了此代碼的變體。 <asp:LinkButton ID="LinkButton1" Font-Underline="true" runat="server" OnMouseOver="mouseOver();" OnMouseOut="mouseOut();">Facility ID</asp:LinkButton> <img src="../Images/invoice.PNG" id="image1" alt="Image Not Found" width="1000" height="500" style="display:none;" runat="server" /> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script> document.getElementById("LinkButton1").onmouseover = function() {mouseOver()}; document.getElementById("LinkButton1").onmouseout = function() {mouseOut()}; function mouseOver() { document.getElementById("LinkButton1").style.color = "red"; document.getElementById("LinkButton1").style.display="inline"; document.getElementById("LinkButton1").src = '../Images/invoice.PNG'; } function mouseOut() { document.getElementById("LinkButton1").style.color = "black"; } </script>我希望看到圖像像標注或彈出窗口一樣顯示。文字變為紅色，頁面僅顯示 javascript:__doPostBack('LinkButton1','')
3 回答
森林海
TA貢獻2011條經驗 獲得超2個贊
我想我可能會看到你的問題。在這條線上
document.getElementById("LinkButton1").src?=?'../Images/invoice.PNG';您似乎正在嘗試更新按鈕的 src 而不是圖像。
嘗試更新您的代碼以使用 img 標簽的 id，如下所示
document.getElementById("image1").src?=?'../Images/invoice.PNG';EDIT1?好的，我現在添加，所以當您將鼠標懸停在按鈕上時，圖像可用，而當您將鼠標移出時，圖像就會消失。我使用 css 可見性屬性來執行此操作。我們使用 style 屬性將圖像默認內聯設置為隱藏。當您將鼠標懸停在按鈕上時，我們將可見屬性設置為可見，而當您將鼠標移出按鈕時，我們將其設置回隱藏。
這是執行此操作的代碼
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
</head>
<body>
? ? <button id="button1">Button</button>
? ? <img id="image1" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png" style="visibility: hidden;"></img>
</body>
<script>
? ? function mouseOver(){
? ? ? ? document.getElementById('button1').style.color = "green";
? ? ? ? document.getElementById('button1').style.display = "inline";
? ? ? ? document.getElementById('image1').style.visibility = "visible";
? ? }
? ? function mouseOut(){
? ? ? ? document.getElementById('button1').style.color = "red";
? ? ? ? document.getElementById('image1').style.visibility = "hidden";
? ? }
? ? document.getElementById('button1').onmouseover = mouseOver;
? ? document.getElementById('button1').onmouseout = mouseOut;
</script>
</html>
我還使用新代碼更新了 gitub 示例，并將其放入文件標題 index2.html 中。
弒天下
TA貢獻1818條經驗 獲得超8個贊
在您的建議和一些修改之間，我能夠使代碼按預期工作。
這是最終的代碼。當我將鼠標懸停在鏈接按鈕上時，圖像顯示在按鈕下方，并在鼠標移出時消失。
<asp:LinkButton ID="LinkButton1" Font-Underline="true" runat="server"
OnMouseOver="mouseOver();" OnMouseOut="mouseOut();">Facility ID</asp:LinkButton>
function mouseOver() {
document.getElementById("image1").style.display = "inline";
document.getElementById("image1").style.backgroundimage = "input type=image";
}
function mouseOut()
{
document.getElementById("image1").style.display="none";
}
當年話下
TA貢獻1890條經驗 獲得超9個贊
LinkButton 只是 html 中的一個錨點，沒有屬性src。它不是一個圖像。使用背景圖像。
document.getElementById("LinkButton1").style.backgroundImage = "url('image.png')";或者將其更改為 ImageButton 控件，它變為<input type="image"
- 3 回答
- 0 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消