鼠标悬停在图像上的 HTML 超链接答案

【问题标题】：HTML hyperlink with mouse over image鼠标悬停在图像上的 HTML 超链接
【发布时间】：2008-11-14 02:00:43
【问题描述】：

我有一个 Html 超链接。我需要将此超链接链接到另一个页面。当我将鼠标放在链接上时。它应该显示图像。如何做到这一点

【问题讨论】：

【解决方案1】：

这取决于您需要在哪里显示图像。如果您正在寻找链接旁边或后面的图标线条，您可以通过 CSS 使用链接悬停状态下的背景图像来完成此操作：

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*/
}

我这样做是出于我的想法，所以你可能需要做一些小的调整。

如果您想在页面的其他位置显示图像，您可以使用 javascript 在链接的鼠标悬停事件中隐藏/显示图像。

如果这不能解决您的问题，也许您可以提供一些额外的信息来帮助指导每个人找到正确的答案。

【讨论】：

+1 - 这是迄今为止最简单的悬停方法。我已经看到远远太多复杂的和过度的 javascript 方法来完成这项任务，而 CSS 可以更轻松地完成大多数人想要的事情。
我唯一要补充的是，如果您在 a:link 上设置背景图像但给它背景位置：-1000px -1000px;然后浏览器会立即加载它，但你不会看到它，因为它不在屏幕上。我希望这是有道理的。

【解决方案2】：

您可以使用 jquery 轻松做到这一点：

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

一些经过实际测试的更全面的示例： http://docs.jquery.com/Events/hover

【讨论】：

【解决方案3】：

你可以使用 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>

再见！

【讨论】：

我认为他希望图像显示在页面上，而不是鼠标光标下方。