How to overlay a transparent PNG over an image /when rolling over some other item/

Problem

I have a webpage with a content image. On this image, I want to highlight a few different items, triggered by the user rolling over the corresponding item in the text on the same page.

I have transparent PNGs that I can use as image overlays to accomplish the highlighting. I know how to make an overlay appear STATICALLY by using span tags (as explained here).

But, I am at a loss how to display a specific overlay ONLY WHEN the user is rolling over some particular piece of text. To visualize what I am trying to do, imagine an image that shows a London Tube map. I want a yellow highlight to appear over a specific station when the pointer is over the name of that station in the text.

Any suggestions, examples, or related tutorials would be much appreciated!

  • Matt

Problem courtesy of: Matt Mizumi

Solution

This should work. Just replace the SPANs with the PNG image tags. You may also want to use display block instead of display inline for the images.

<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
#map {
position: relative;
border: 1px solid black;
width: 350px;
height: 200px;
}
#station_A { top: 20px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
</head><body>
<div id="map">
<span id="station_A" class="overlay">Highlight image here.</span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>

<p>
<span class="hover station_A">Station Alpha</span> is one example.
<span class="hover station_B">Station Beta</span> is another.
</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
jQuery(function() {
jQuery('.overlay').each(function(i, el) {
jQuery('.' + el.id)
.mouseenter(function() { jQuery(el).css('display', 'inline') })
.mouseleave(function() { jQuery(el).css('display', 'none') });
});
});
</script>
</body></html>

Solution courtesy of: Mark Eirich

View additional discussion.