HTML超鏈接鼠標在圖像上

3

這取決於您需要顯示圖像的位置。

a:link 
{ 
    background-image:none; 
} 

a:hover 
{ 
    background-image:url('images/icon.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    padding-right:10px /*adjust based on icon size*/ 
}

我做這一關頂：如果您正在尋找沿着圖標的旁邊或鏈接在後方的東西，你可以對鏈接的懸停狀態使用背景圖像通過CSS實現這一目標我的頭，所以你可能需要做一些小的調整。

如果您想在頁面上的其他位置顯示圖像，可以使用javascript在鏈接的mouseover事件中隱藏/顯示圖像。

如果這不能解決您的問題，也許您可以提供一些額外的信息來幫助指導每個人正確的答案。

來源

2008-11-14 02:10:31

+0

+1 - 這是迄今爲止做懸停的最簡單的方法。我已經看到了* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * – nickf 2008-11-14 02:18:04

0

你可以做到這一點使用JavaScript ..

這將創建一個跟隨你的DIV或元素懸停鼠標一個正方形。

創建這裏這些內容.js文件：



var WindowVisible = null; 
function WindowShow() { 
    this.bind = function(obj,url,height,width) { 
     obj.url = url; 
     obj.mheight = height; 
     obj.mwidth = width; 
     obj.onmouseover = function(e) { 
      if (WindowVisible == null) { 
       if (!e) e = window.event; 
       var tmp = document.createElement("div"); 
       tmp.style.position = 'absolute'; 
       tmp.style.top = parseInt(e.clientY + 15) + 'px'; 
       tmp.style.left = parseInt(e.clientX + 15) + 'px'; 
        var iframe = document.createElement('iframe'); 
        iframe.src = this.url; 
        iframe.style.border = '0px'; 
        iframe.style.height = parseInt(this.mheight)+'px'; 
        iframe.style.width = parseInt(this.mwidth)+'px'; 
        iframe.style.position = 'absolute'; 
        iframe.style.top = '0px'; 
        iframe.style.left = '0px'; 
       tmp.appendChild(iframe); 
       tmp.style.display = 'none'; 
       WindowVisible = tmp; 
       document.body.appendChild(tmp); 
       tmp.style.height = parseInt(this.mheight) + 'px'; 
       tmp.style.width = parseInt(this.mwidth) + 'px'; 
       tmp.style.display = 'block'; 
      } 
     } 
     obj.onmouseout = function() { 
      if (WindowVisible != null) { 
       document.body.removeChild(WindowVisible); 
       WindowVisible = null; 
      } 
     } 
     obj.onmousemove = function(e) { 
      if (!e) e = window.event; 
      WindowVisible.style.top = parseInt(e.clientY + 15) + 'px'; 
      WindowVisible.style.left = parseInt(e.clientX + 15) + 'px'; 
     } 
    } 
}

然後在你的HTML執行以下操作：

包含的js文件<script type="text/javascript" src="myfile.js"></script>
把你的網頁：



<script type="text/javascript"> 
      var asd = new WindowShow(); 
      asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480); 
</script>

這是在HTML的完全實現：

<html> 
<head> 
    <title>test page</title> 
    <style> 
     div.block { width: 300px; height: 300px; background-color: red; } 
     iframe { border: 0px; padding: 0px; margin: 0px; } 
    </style> 
    <script type="text/javascript" src="window_show.js"></script> 
</head> 
<body> 
    <div id="go1" style="background-color: red; width: 200px; height: 200px;"></div> 

    <script type="text/javascript"> 
     var asd = new WindowShow(); 
     asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480); 
    </script> 
</body>

再見！

來源

2008-11-14 02:09:23

+0

我覺得他想的圖像顯示在頁面上，而不是下面的鼠標光標。 – nickf 2008-11-14 02:16:15

0

您可以使用jQuery很容易地做到這一點：

$("li").hover(
    function() { 
    $(this).append($("<img src="myimage.jpg"/>")); 
    }, 
    function() { 
    $(this).find("img:last").remove(); 
    } 
);

這是實際測試過一些更全面的例子： http://docs.jquery.com/Events/hover

來源

2008-11-14 02:14:12

HTML超鏈接鼠標在圖像上

回答

相關問題