2

編集：これらを解決する方法について多くの素晴らしい例をありがとう。誰を受け入れるかはまだ決まっていませんが、すべての例を見て、どれが一番好きかを見ていきます。素晴らしいフィードバックの人たち！= D

私は通常、この種のことをフラッシュで行いますが、今回はMac、iPad、およびそれらすべてのユニットとも互換性がある必要があります。

だから、私は何を手伝う必要がありますか？

いくつかの「ホットスポット」がオンになっている写真があります。これらのホットスポットのいずれかをクリックして、いくつかの情報を表示できるようにしたいと思います。

これはかなり基本的で簡単に実現できるはずですが、HTMLでこれを行ったことがないので、皆さんに聞いてみる必要があります=）

それで、これを行うための最良の方法は何でしょうか？あらゆるブラウザやデバイスと互換性がある必要があり、非常に高度である必要はありません。ボックスにエフェクトを追加できる場合（スライドアウト、フェードインなど）、それは素晴らしいボーナスですが、私が必要とするものではありません。

どんな助けでも素晴らしいでしょう！

壊す：

いくつかの「ホットスポット」（私の例では番号1と2）を含む背景画像があります。写真＃2に示すように、ユーザーはこれらのいずれかにマウスを合わせるか、クリックして詳細情報を取得できる必要があります。

http://i50.tinypic.com/so5nw1.jpg

これは、これらのホットスポットのいずれかにカーソルを合わせる/クリックすると発生します。テキストと画像は、素敵な小さな情報ボックス内に表示されます。

http://i49.tinypic.com/1449o28.jpg

ユーザーが[詳細情報]をクリックすると、さらに開いて、可能な場合はさらに多くの情報が表示されます。このimgのように：

http://i50.tinypic.com/2502fzq.jpg

4

4 に答える 4

2

これは別のアプローチであり、私の意見では、マップや過剰な JS を使用するよりもはるかに優れています。<div>background-image を持つ要素の上に要素を配置し、HTML と CSS に面倒な作業を任せます。

私の例の画像

JSFiddleで見る

HTML

HTML は、理解するのに十分きれいに見えるはずです。<div>クラスで を作成し、hotspot存在する特定のものに依存します。つまり、（.text数字を表示する）、.hover-popup（ホバー時に表示する）、.click-popup（内側.hover-popupにあり、クリックすると表示される）。

<div id="hotspot1" class="hotspot">
    <div class="text">1</div>
    <div class="hover-popup">
        I was hovered!
        <div class="click-popup">
            I was clicked on!
        </div>
    </div>
</div>

<div id="hotspot2" class="hotspot">
    <div class="text">2</div>
    <div class="hover-popup">
        I was hovered!
        <div class="click-popup">
            I was clicked on!
        </div>
    </div>
</div>

CSS

これは、ほとんどの魔法が発生する場所です。詳細については、コメントを参照してください。

/* These two position each hotspot */
#hotspot1 {
    left:15%; /* we could use px or position right or bottom also */
    top:20%;
}

#hotspot2 {
    left:35%;
    top:25%;
}

/* General styles on the hotspot */
.hotspot {
    border-radius:50%;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:#CCC;
    position:absolute;
}

.hotspot .text {
    width:40px;
    height:40px;
}

/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
    cursor:pointer;
}

/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
    display:none;
    z-index:1;
}

/* show when clicked */
.hotspot.clicked .click-popup {
    display:block;
}

/* show and position when clicked */
.hotspot:hover .hover-popup {
    display:block;
    position:absolute;
    left:100%;
    top:0;
    width:300px;
    background-color:#BBB;
    border:1px solid #000;
}

JavaScript (jQuery を使用)

残念ながら、CSS には「クリックされた」状態がないため (チェックボックスによるハック以外では)、クリック部分に JavaScript を使用する必要があります。私がやりたいことをするのはとても簡単なので、私はjQueryを使用しています。

$(document).ready(function () {
    $('.hotspot').click(function () {
        $(this).toggleClass('clicked');
    });
});

矢印の作成

css-tricksで、 :beforeand/or:after疑似要素を使用して要素に矢印を付けるためのチュートリアルを見つけることができます。要素:afterを:before. しかし、そうです、これを行う方法に関する多くのリソース。

于 2013-03-01T12:07:26.190 に答える
2

ここでは Javascript のアプローチが本当に必要だとは思いません。JSBinで、CSS のみの小さなモックアップを作成しました。

基本的に重要なのは、画像を相対的に配置divされた で囲み、ホットスポットを同じ 内に絶対配置することdivです。hotspots 内にdivは more info 要素が:hoverあり、その親のみが表示されます。

これにより、シンプルになり、はるかにアクセスしやすくなります。

更新：画像を両側から均等にトリミングする

画像を中央に保持し、JavaScript を使用しない場合は、必要な画像をbackground-imageコンテナーの として設定し、そのbackground-positionパラメーターを に設定しますcenter center。

widthこれdivの が画像の幅に設定され、が 100% に設定されていることを確認する必要がありますmax-width。これにより、ウィンドウが画像の幅よりも小さくサイズ変更されたときに中央に留まるようになります。

さて、ここで私が遭遇した問題は、ホットスポットを画像の中心にとどめる方法です。私はこのように解決しました：

div次の特性を持つホットスポットのラッパーを作成しました。

margin:   0 auto;
position: relative;
width:    0px;

これは基本的に、ラッパーdivが画像の中心を見つけられるようにします。次に、開始点としての左上ではなく、画像の上部中央の位置に対して相対的にホットスポットを配置します。

次に、探しているものがあります。

ワーキングデモ

于 2013-03-01T12:14:31.543 に答える
0

その画像のクラスをhtmlで指定します（例：imgclass）。そして、javascript（jqueryを使用）で、そのホバーボックスをhtml形式で作成し、その画像の「マウスオーバー」イベントにバインドします。

例えば：

 function bindhtmltoimage() {
    myimg = $('body').find('.imgclass');
    divSlot.each(function (index) {
        $(this).bind('mouseover', function () {
            try {
                //position the hover box on image. you can customize the y and x axis to place it left or right.
                var x = $(this).offset().left;
                var y = $(this).offset().top;
                var position = $(window).height() - ($("#divHover").height() + y);
                var widthposition = $(window).width() - ($("#divHover").width() + x);
                if (position < 0 || widthposition < 0) {
                    if (position < 0) {
                        $("#divHover").css({
                            position: 'absolute',
                            left: x + 20,
                            top: y - $("#divHover").height() - 20
                        });
                    }
                    if (widthposition < 0) {
                        $("#divHover").css({
                            position: 'absolute',
                            left: x - $("#divHover").width(),
                            top: y + 20
                        });
                    }
                }

                //build your html string for that hover box and apply to it.
                $('#divHover').html("your Html content for that box goes here");
                $('#divHover').show();

                //if you want the box dynamically generated. create the html content and append to the dom.
            }
            catch (e) {
                alert(e)
            }
        });
    });
}

デスクトップとモバイルで正常に動作します。タッチデバイスで問題が発生した場合は、関数を「マウスオーバー」ではなくクリックイベントにバインドします。

また、マップアプローチについては、画像ではなくSVGを強くお勧めします。

于 2013-03-01T12:01:14.557 に答える
0

マップ エリアで onclick または OnMouseOver イベントを使用できるはずです (href を "" として定義します)。

OnMouseOver を使用した例は次のとおりです: http://www.omegagrafix.com/mouseover/mousimap.html

于 2013-03-01T11:58:25.973 に答える