How to overlay a transparent PNG over an image /when rolling over some other item/
I have a webp开发者_开发百科age 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
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>
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
idto 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.
加载中,请稍侯......
精彩评论