How to create an image with "hoverable" areas that show additional information in jQuery or HTML5_问答_开发者

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

开发者 https://www.devze.com 2023-01-11 06:08 出处：网络

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 appreciated.

相关专题：hover jquery

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 appreciated.

Goal- I've got a single image with 16 sections that are hoverable. There are other parts of this image, that are completely static. If a user h开发者_StackOverflow社区overs over one of the predefined areas, I would like for a thumbnail and title to pop up over the image. This is a static page and no content needs to be dynamic.

Right now the entire image is a PNG, but it was saved out from a vector image, so I could convert the areas to SVGs if preferred. Ideally, I could keep it as a single image as this would be useful for a wider variety of projects.

I'm ok with doing it in HTML5 or jQuery.

Does a solution for this already exist? I feel like it must. Any additional questions?

I'm already aware of this and plan to use something similar to this as a backup plan - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map

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>

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.