Home/ Questions/Q 969045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:34:54+00:00

I have a webpage with a content image. On this image, I want to

  • 0

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
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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