All geek questions in one place

How to apply transparent PNG to an image / when rolling any other element /

I have a webpage with image content. In this image, I want to highlight several different elements caused by the user clicking on the corresponding element in the text on the same page.

I have transparent PNGs that I can use as image overlays to perform selection. I know how to make a STATICALLY overlay using span tags (as described here ).

But I don’t understand how to display a specific overlay ONLY WHEN a user rolls over a certain part of the text. To visualize what I'm trying to do, imagine an image that displays a map of the London Tube. I want the yellow backlight to be displayed on a specific station when the pointer is above the name of that station in the text.

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

  • Matt
+3
source share
2 answers

That should work. Just replace the SPAN with PNG image tags. You can also use the display unit instead of displaying the inline image.

<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>
+5
source

, - .

css

.photo {
    margin: 30px;
    position: relative;
    width: 180px;
    height: 130px;
    float: left;
}
.photo img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
}
.photo span {
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    background: url(images/digg-style.gif) no-repeat;
}

javascript jquery

$(document).ready(function(){
    $(".photo span").hide();  // initialize the span as hidden

            // only show the span on hover
    $("a.mapper").hover(
        function(){
            var aHash = $(this).attr("href").split("#")[1];
            $("#"+aHash).show();
        },
        function(){
            var aHash = $(this).attr("href").split("#")[1];
            $("#"+aHash).hide();
        }
    );
});

HTML

<div class="photo">
    <a href="#">
        <span id="map1"></span>
        <img src="photo.jpg" />
    </a>
</div>

<a href="#map1" class="mapper">map1</a>

:

  • HTML, id , , hover
  • -, , .
  • jquery hover .
+2

Source: https://habr.com/ru/post/1757594/

More articles:


All Articles