0

小さな写真がたくさんあるIMGマップを使用しています。各画像にカーソルを合わせると、大きな画像が表示されます。どうすればいいですか？動作する限り、javascript、css などを使用してもかまいません。例を挙げてください。

IMG MAPのHTML

<img src="img.jpg" alt="Main Photo - Please View With Images On"
usemap="#Map" class="center" style="width:900px;" border="0" />
<map name="Map" id="Map">
 <area class="1" shape="rect" coords="4,3,225,150" />
 <area class="2" shape="rect" coords="2,152,221,303" />
 <area class="3" shape="rect" coords="3,303,221,452"  />
</map>

各クラスには、大きく表示するための異なる画像があります。

4

2 に答える 2

2

ImageMapsterでそれを行う方法は次のとおりです。

http://jsfiddle.net/zSBL5/

これを組み込みのツールチップ API で機能させるには、いくつかのことを行う必要があります。最初に、次のように各領域に属性を追加します。

<area data-key="2,all"  shape="rect" coords="0,90,82,170" 
    href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />

注data-key。これが ImageMapster の「mapKey」です。あなたの状況でそれが必要な唯一の理由は、各エリアに同じツールチップを表示するために使用できる「すべて」と呼ばれる単一のエリア グループを作成するためです。各エリアにはこのような属性がありますが、番号は異なります (例: data-key="3,all"、data-key="4,all"など)。

次に、imagemapster をバインドするコードを次に示します。

$('img').mapster({
    toolTipContainer: $('#tooltip-container'),
    mapKey: 'data-key',
    areas: [ {
        key: 'all',
        toolTip: true
    }],
    showToolTip: true,
    onShowToolTip: function(data) {
        if (this.href && this.href!='#') {
            data.toolTip.html('<img src="'+this.href+'">');
        }
    }});​

各オプションの意味は次のとおりです。

1)toolTipContainerツールチップを表示するテンプレートの HTML を含める必要があります。フィドルでは、ID「tooltip-container」の非表示の div を追加したことがわかります。

2)mapKeyは、各領域に追加した属性の名前です。この属性には、1 つ以上のカンマ区切りの値を含めることができます。Imagemapster は、最初の値を共有する強調表示用の領域をグループ化するため、領域をグループ化する必要がない場合は、別の領域を使用してください。2 番目の値は各エリアで同じにする必要があります。これを使用して、すべてのエリアのツールチップを有効にします。

3)areasは、領域固有のフォーマット情報の配列です。通常、これを使用して、各領域のハイライト効果がどのように表示されるかを制御します。あなたの場合、私はそれを使用してすべての領域のツールチップをアクティブにしています。キーallはすべての領域に一致します。これは、すべての領域が 2 番目のキーとしてそれを持ち、toolTip: trueツールヒントを有効にするためです。通常toolTip: "some text specific to this area:"、そのテキストは、デフォルトのツールチップ コンテナーに表示されるだけです。あなたの場合、画像を表示したいのですが、領域自体から画像の URL を取得したいので、ツールチップが表示されたときに関数で処理する必要があります。

4)showToolTipマップ全体のツールチップを有効にします。

5)onShowToolTipツールチップが表示されるたびに呼び出される関数を定義します。ここから、それをインターセプトし、コンテンツを変更して、その領域からの画像を表示できます。

これはもっと単純なはずですが、imagemapster のツールチップ API は、各領域にハードコードされたテキストをいくつか持つだけの非常に単純なモデルを中心に設計されています。これは、各領域の href から URL を取得するための回避策です。

于 2012-06-21T11:23:31.420 に答える
0

以下のフィドルのようなものが欲しいと思います。書かれたコードは非常にラフで、最適化できます。これまたは何か他のものが欲しいかどうかを確認してください。

デモ: http://jsfiddle.net/3GF6s/3/

于 2012-06-21T06:39:04.263 に答える