Position popup image on mouseover

Question

I'm trying to replicate the effect seen on this webpage:

http://www.strongtie.com/products/alpha_list.html?source=topnav

When hovering over the text in the alphabetical listing, a popup image appears directly to the left of the text. This page helped get me started but I would like my images to appear to the left, instead of below. Also how do I get a different image to appear for multiple <p>tags (instead of the just the one, (listed on the help page linked above) in var pathToImage?

< script type = "text/javascript" >
  <!-- 
  $(document).ready(function() {
    var yOff = 15;
    var xOff = -20;
    var pathToImage = "/v/vspfiles/images/simpson/A21__.jpg";

    $(".text-hover-image").hover(function(e) {
        $("body").append("<p id='image-when-hovering-text'><img src='" + pathToImage + "'/></p>");
        $("#image-when-hovering-text")
          .css("position", "absolute")
          .css("top", (e.pageY - yOff) + "px")
          .css("left", (e.pageX + xOff) + "px")
          .fadeIn("fast");
      },
      function() {
        $("#image-when-hovering-text").remove();
      });

    $(".text-hover-image").mousemove(function(e) {
      $("#image-when-hovering-text")
        .css("top", (e.pageY - yOff) + "px")
        .css("left", (e.pageX + xOff) + "px");
    });
  });
//-->
< /script>

The result is on this page if you scroll down a bit to "A Angles" and hover over the link.

Any help appreciated, thanks!

Answer 1

That site is doing it with css:

HTML

<td align="left" valign="top" class="alpha-list">
<p class="mainline PA_product"><a href="/products/connectors/PA.asp"><span>
<img src="/graphics/products/small/PA-PAHD-HPAHD3.gif" width="73" height="80" border="0">
</span>PA Holdown </a></p>
...
</td>

CSS

td.alpha-list A:hover span img {
  border: 1px solid #DDDDDD;
  padding: 2px;
  display: block;
  position: absolute;
  left: -90px;
  top: -25px;
  z-index: 102;
  background-color: #FFFFFF;
}

It basically just displays the image on hover and then uses CSS for positioning.

TIP Use the chrome dev tools to inspect something like this.

1. Use the "select element" tool to choose one of the links
2. Select the "elements" tab
3. Under "styles" click the "toggle element state" icon and choose ":hover" - this puts the link in a hover state
4. Now you can select the pop-up image element to inspect the CSS used for styling

Hope this helps

Answer 2

Using Wil's answer as base, you can get the same result without using any javascript.

HTML

<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 1</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 2</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 3</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 4</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 5</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 6</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 7</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 8</a></p>

CSS

p.product a img {
    display: none;
    position: absolute;
    left: -80px;
    top: -22px;
}
p.product a {
    display: inline-block;
    position: relative;
}
p.product a img {
    display: none;
}
p.product a:hover img {
    display: inherit;
}
p.product {
    margin-left: 100px;
}

Example in: http://jsfiddle.net/4hzenxkh/1/

Answer 3

Here's a quick way to do it.

http://jsfiddle.net/wilchow/4hzenxkh/

HTML:

<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 1</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 2</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 3</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 4</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 5</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 6</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 7</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 8</a></p>

CSS:

p.product a img {
    display: none;
    position: absolute;
    left: -80px;
    top: -22px;

}
p.product a {
    display: inline-block;
    position: relative;
}
p.product {
    margin-left: 150px;
}

script:

$(document).ready(function() {
    $(".product a").mouseover(function () {
        $(".product a img").css("display", "none"); // hide all product images
        $(this).find("img").css("display", "inline-block"); // show current hover image
    })
    $(".product a").mouseout(function () {
        $(".product a img").css("display", "none"); // hide all product images
    })
});