ansaurus

Question

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

Answer 1

+1 A:

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"&gt;&lt;/script&gt;
  <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>

Mark Eirich 2010-08-02 03:21:34

Nice minimal example, very clean. Tested and works -- thanks very much indeed! I'm setting this as the answer just because you were first but I wish I could give both replies equal credit!

Matt Mizumi 2010-08-02 04:20:34

Thanks, Matt. Best of luck with the project. Comment here if you run into any trouble with my code.

Mark Eirich 2010-08-02 04:25:51

Answer 2

+1 A:

in the example link you have given you can do something like this.

in your 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 using 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();
        }
    );
});

and HTML

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

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

Explain:

in your HTML tags, put an id to each span you want to show and hide on hover
in your text links put a hash link that corresponds to the id you want to show on hover.
use jquery hover function for showing and hiding of the span overlay.

rob waminal 2010-08-02 03:23:32

Great, tested this and works. Thanks also for relating the answer back to the example in the link. The critical advance I didn't know of was how to use hover to act on some other object.

Matt Mizumi 2010-08-02 04:19:10

ansaurus

tags:

views:

answers:

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

Explain:

related questions