How To Create An Image With "hoverable" Areas That Show Additional Information In Jquery Or Html5
I'm trying to create something which I feel should be simple to do in jQuery or HTML5, but am having a tough time finding the resources for it. If anyone can help, it would be much
Solution 1:
Something like this? Save as an .html file for an example.
<html>
<head>
<style type="text/css">
#image
{
background-image: url('http://www.breederretriever.com/blog/wp-content/uploads/2008/10/snoopy013f25505ii3.jpg');
height:350px;
width:450px;
}
#caption
{
height:50px;
width:100%;
}
.hoverable{
background-color:yellow;
}
.hoverable2{
background-color:purple;
color:white;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.hoverable').hover(function(){
$('#caption').html($(this).attr('title'));
},function(){
$('#caption').html('');
});
$('.hoverable2').hover(function(){
$('#caption').append($('#' + $(this).attr('title')));
},function(){
$('#dvExtraContainer').append($('#' + $(this).attr('title')));
});
});
</script>
</head>
<body>
<div id="caption" ></div>
<div id="image"></div>
<div title="This is a test" class="hoverable" style="position:absolute;top:100px;left:100px;">test</div>
<div title="This is another test" class="hoverable" style="position:absolute;top:200px;left:230px;">test2</div>
<div title="This is yet another test" class="hoverable" style="position:absolute;top:70px;left:430px;">test3</div>
<div title="dvExtra1" class="hoverable2" style="position:absolute;top:150px;left:30px;">test4</div>
<div style="display:none;" id="dvExtraContainer">
<div id="dvExtra1" >
Title: <img src="http://www.opticstalk.com/smileys/Snoopy.gif" />
</div>
</div>
</body>
</html>
Post a Comment for "How To Create An Image With "hoverable" Areas That Show Additional Information In Jquery Or Html5"