How to hide show image link on top of another image link

Question

I ran into a unique request for a HTML page. I needed one image to link to a website and an second image which would sit on top of the first that opens the same website in a new window. In effect, the second image is a quasi-maximize button placed in the top right-hand corner.

The trick is the "maximize button" needs to only appear when hovering over the first image.

Special thanks to these two posts. I was able to piece together a solution. I am sharing my work below in the approved answer.

score 0 · Accepted Answer · answered Aug 25 '14 at 17:50

Here is a sample of the CSS, JavaScript and HTML I used to get the desired effects I wanted. Please let me know where I can improve.

Note: I used JavaScript to guarantee the link would open in a new window. If you know a better way to do this. Please share. It bugs me that I have anchor tags using onClick events.

<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>

How to hide show image link on top of another image link

1 Answers1