q Совет не работает при наведении на изображение

Question

Я создаю страницу типа 101 и пытаюсь создать интерактивный раздел для анатомии буквенных форм. Вот ссылка, чтобы вы могли понять, о чем я говорю: http://willryan.us/test/

Я планирую разместить его там, где вы наводите курсор на разные части изображения, и появится всплывающая подсказка с описанием части, на которую вы смотрите. По какой-то причине я даже не могу показать qTip. Я перепробовал все, что мог придумать, но он все еще не работает.

Вот что у меня есть:

HTML

    <div id="anatomyBox">
            <div id="anatomy">
                <h1>ANATOMY</h1>
                <h2>You're saying a letter has different parts?!</h2>
                <p>Type Fun01 was created to Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus ante vitae orci dapibus sollicitudin. Nam pretium volutpat blandit. Sed tristique nunc ut justo gravida sollicitudin.</p>

                <p>Nulla facilisi. Duis sit amet libero a massa aliquet auctor vitae eget quam. Donec est magna, porttitor id porta eget, porttitor a ante. Nam felis dolor, aliquet vel vulputate vitae, lacinia sed leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at diam in nisi varius tincidunt.</p>

                <p>What is typography? We've known each other for so long Your heart's been aching but you're too shy to say it Inside we both know what's been going on We know the game and we're gonna play it And if you ask me how I'm feeling Don't tell me you're too blind to see</p>
            </div>

            <div id="anatomyMap1">
                <img src="assets/images/anatomy_1.png" width="804" height="114" alt="Clarendon">
            </div>

JS (в заголовке)

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 <!-- add q-tip-->
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script> 

<script type="text/javascript">
    $(document).ready(function() 
        { 
           $('#anatomy img').qtip({
           content: 'This is an image',
           show: 'mouseover',
           hide: 'mouseout'
        });
    });
</script>

Что я делаю неправильно?! Это похоже на супер простой JavaScript, но он не работает. И я, очевидно, еще не совсем там, но как лучше навести курсор на разные участки одного изображения и увидеть разные подсказки? Я смотрел в карты изображений, и кажется, что это могло бы сработать... Я думаю, один шаг за раз.

Answer 1

У вас есть ошибка в плагине...

"Uncaught TypeError: Cannot read property 'msie' of undefined"

Эта строка кода вызывает ошибку...

if($.browser.msie) self.elements.tooltip.get(0).style.removeAttribute('filter');

Он предназначен для IE7, поэтому не будет большой проблемой, если вы удалите его.

Также изображение не находится внутри #anatomy

Должно быть #anatomyMap1 img

Я закомментировал старые вещи IE, и они отлично работают.

http://jsfiddle.net/9PEVn/

Возможно, вы захотите взглянуть на Qtip2 на более позднем этапе

http://craigsworks.com/projects/qtip2/