0

ジュエリーを展示するウェブサイトを構築しています。ページレイアウトが原因で、ユーザーに表示される説明のない画像があります。

同僚のウェブサイトを見ていると、 http：//www.sarahschuchard.com/sites/objects.htmlを使用していることに気づきました。これは、画像のalt属性とtitle属性をdivでこれらの属性を表示するマウスオーバー関数にリンクするカルーセルJSです。

この特定のコードを分離しようとしましたが、JSに関する知識が非常に限られているため、うまくいきませんでした。誰かがこのアイデアの実装を手伝ってくれますか？

4

3 に答える 3

2

いくつかの調査の後、私は自分のニーズに合った答えを思いつきました。実際、カルーセルの代わりにカスタムツールチップを使用して追加情報を表示することを検討し始めました。

私が選んだツールチップはTiptipでした。それ自体は簡単に実装できましたが、インストールしたlightbox2プラグインに干渉し始めました。TITLE属性を持つ画像リンクにカーソルを合わせると、デフォルトのツールチップ（カスタムツールチップの横）が表示されたままです。

デフォルトのツールチップは、ネストされたIMGタグの代わりにAタグのTITLE属性を使用し始めました。ライトボックスはこの属性を使用して情報を表示するため、タイトルを除外するオプションは望ましくありませんでした。

マウスオーバーJSコードでTITLEをブロックすると、TITLE属性を削除するのと同じ効果が得られます。

いじくり回して周りを見回した後、私はこの問題を回避する方法を開発しました。

ライトボックスに他の属性を使用させ、次にTITLEをAタグの1つにするオプションについて読みました。対応するコードはJSファイルで簡単に見つけることができました。（ライトボックス2の166行目と174行目あたり、プラグインのような他のライトボックスについてはわかりません）。ALT属性（SEO目的）に変更しましたが、ニーズに合わせてカスタム属性に変更できると思います。

これにより、次のJSコードをHEADタグに挿入して、検索エンジンが引き続き属性を確認できるように、ページからデフォルトのツールチップを削除する方法が確立されました。

$(document).ready(function() {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});

結果は次のとおりですhttp://www.coenhofhuizen.com/Sites/sieraden.html

ライトボックスと互換性のあるカスタムツールチップ。

それが他の人々に役立つことを願っています

于 2012-10-07T13:12:50.210 に答える
1

これはカスタムツールチップと呼ばれます。あなたがしたいのは、コンテナを作成してそれを表示してからmouseover、でそれを削除することmouseoutです。

例えば

$('image').mouseover(function (event) {
    $('<div></div>').css({
        'position': 'absolute',
        'left': event.pageX + 10,
        'top': event.pageY + 10,
        'z-index': 100
    }).addClass('tooltip').text($(this).attr('title')).appendTo(document);
}).mouseout(function (event) {
    $('.tooltip').remove();
});
于 2012-10-05T11:23:51.837 に答える
0

同僚がWebサイトでライトボックスを使用しています。ここから無料でダウンロードできます。http： //lokeshdhakar.com/projects/lightbox2/ 原則として、インストールは簡単で（例を確認）、画像のタイトルタグをポップアップボックスのキャプションとして使用します。

于 2012-10-05T11:22:29.367 に答える