ansaurus

Question

How to create an image with "hoverable" areas that show additional information in jQuery or HTML5

Answer 1

+1 A:

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

Brandon Boone 2010-08-13 18:37:29

Answer 2

A:

You could split up the image into 16 separate images and do your hovers with more traditional techniques. If that's not feasible, you might also consider this technique using a definition list, or the old-school MAP tag with some javascript.

Superstringcheese 2010-08-13 19:00:38

ansaurus

tags:

views:

answers:

How to create an image with "hoverable" areas that show additional information in jQuery or HTML5

related questions