如何在另一個圖像鏈接的頂部隱藏顯示圖像鏈接

Question

我遇到了對HTML頁面的獨特請求。 我需要一個圖像鏈接到網站，第二個圖像位於第一個圖像的頂部，第一個圖像在新窗口中打開同一網站。 實際上，第二個圖像是放置在右上角的准最大化按鈕。

訣竅是只有在將鼠標懸停在第一張圖像上時才需要顯示“最大化按鈕”。

特別感謝這兩個職位。 我能夠拼湊出一個解決方案。 我在下面的認可答案中分享我的工作。

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 個解決方案

解決方案1
0 已采納 2014-08-25 17:50:34

如何在另一個圖像鏈接的頂部隱藏顯示圖像鏈接

問題描述

1 個解決方案

解決方案1 0 已采納 2014-08-25 17:50:34

解決方案1
0 已采納 2014-08-25 17:50:34