Как создать изображение с «перемещаемыми» областями, которые показывают дополнительную информацию в jQuery или HTML5 - PullRequest
Новая
       13

Как создать изображение с «перемещаемыми» областями, которые показывают дополнительную информацию в jQuery или HTML5

2 голосов
/ 13 августа 2010

Я пытаюсь создать что-то, что, на мой взгляд, должно быть просто сделать в jQuery или HTML5, но мне сложно найти ресурсы для этого. Если кто-то может помочь, это было бы очень ценно.

Goal- У меня есть одно изображение с 16 разделами, которые доступны для просмотра. Есть другие части этого изображения, которые полностью статичны. Если пользователь наводит указатель мыши на одну из предопределенных областей, я хотел бы, чтобы над изображением появлялись миниатюра и заголовок. Это статическая страница, и контент не должен быть динамическим.

Прямо сейчас все изображение в формате PNG, но оно было сохранено из векторного изображения, поэтому я мог преобразовать области в SVG, если это необходимо. В идеале я мог бы сохранить его как одно изображение, так как это было бы полезно для более широкого спектра проектов.

Я в порядке с этим в HTML5 или jQuery.

Есть ли решение для этого уже существует? Я чувствую, что это должно. Есть дополнительные вопросы?

Я уже знаю об этом и планирую использовать нечто подобное этому в качестве плана резервного копирования - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map

Ответы [ 2 ]

1 голос
/ 13 августа 2010

Вы можете разделить изображение на 16 отдельных изображений и выполнять парение с помощью более традиционных методов.Если это невозможно, вы можете также рассмотреть эту технику , используя список определений или тег старой школы MAP с некоторым javascript .

1 голос
/ 13 августа 2010

Как то так? Сохранить как файл .html для примера. 

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