Question

我正在创建一个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，但它不起作用。而且我显然还不是那里，但是将鼠标悬停在一个图像的不同部分并查看不同的工具提示的最佳方法是什么？我正在研究图像地图，看起来这样可行......我猜是一步一步。

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/

q将鼠标悬停在图像上时不起作用

1 个答案: