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 (head タグ内)

<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 のように見えますが、機能していません。そして、私は明らかにまだそこにいませんが、1 つの画像のさまざまなセクションにカーソルを合わせて、さまざまなツールヒントを表示する最善の方法は何ですか? 私はイメージマップを調べていましたが、うまくいくようです...一歩ずつだと思います。

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 に答える