Question

我遇到了HTML页面的唯一请求。我需要一个图像链接到一个网站和第二个图像，它将位于第一个在新窗口中打开同一网站的图像。实际上，第二张图像是放置在右上角的准最大化按钮。

诀窍是＆＃34;最大化按钮＆＃34;只有当鼠标悬停在第一张图像上时才会出现。

特别感谢这两个帖子。我能够拼凑出一个解决方案。我将在批准的答案中分享我的工作。

Answer 1

以下是我用来获得所需效果的CSS，JavaScript和HTML示例。请让我知道我可以改进的地方。

注意：我使用JavaScript来保证链接在新窗口中打开。如果你知道更好的方法来做到这一点。请分享。它让我觉得我有使用onClick事件的锚标签。

<html>
<head>
<style type="text/css">
.bannerContainer
{
    position: relative;
    left: 0;
    top: 0;
    display:inline;
}

.myBanner
{
    position: relative;
    top: 0;
    left: 0;
}
.myBanner:hover + .newWindowButton
{
    display: inline;
}

.newWindowButton
{
    display: none;
}

.newWindowButton:hover
{
    display: inline;
}

.newWindowButton img
{
    /*This positions the maximize button.  You will have to play with the positioning to get it just right for your work.  This is what worked for me.*/
    position: absolute;
    top: -106px;
    left: 170px;
    width:30px;
    height:30px;
}

.pointer
{
    cursor: pointer;
}
</style>

<script type="text/javascript>
function myLinkClick(Url, isInNewLimitedWindow) {
      if (isInNewLimitedWindow) {
         window.open(environmentUrl, "_blank", "toolbar=no, scrollbars=no, menubar=no, resizable=yes");
      }
      else {
         window.open(environmentUrl);
      }
}
</script>
</head>
<body>
     <div class="bannerContainer">
          <a class="myBanner pointer" onclick="myLinkClick('http://myWebsite.com', false)">
              <img src="firstImage">
          </a>
          <a class="newWindowButton pointer" onclick="myLinkClick('http://myWebsite.com, true')">
              <img src="secondImage">
          </a>
     </div>
 </body>
</html>

如何在另一个图像链接上隐藏显示图像链接

1 个答案: