0

我正在创建一个 Type 101 页面，并且我正在尝试创建一个用于解剖字母形式的交互式部分。这是一个链接，因此您可以了解我在说什么：http ://willryan.us/test/#anatomyBox

我计划将它悬停在图像的不同部分上，然后弹出一个 qTip，其中包含您正在查看的部分的定义。出于某种原因，我什至无法显示 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，但它不起作用。而且我显然还没有完全到达那里，但是将鼠标悬停在一张图像的不同部分并查看不同工具提示的最佳方式是什么？我正在研究图像映射，它似乎可以工作......我想一次一步。

4

1 回答 1

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/

于 2013-01-23T16:16:28.660 回答