2

HTML、CSS、Javascript を使用してインタラクティブな地図機能を作成したいと考えています。したがって、マップに Link-Tag (または類似のもの) を配置する必要があります。次の画像は、私が達成しようとしていることを示しています。ここに画像の説明を入力

赤い十字はクリック可能なリンクにする必要があります (必ずしも赤い十字だけでなく、透明な四角形がクリック可能であれば問題ありません)。

これまでのところ、マップ上の対応する位置に長方形を配置できる (image-)map タグに出会いました。これが最善の方法なのか、それとも別のより快適な方法やそのようなことを行うためのベストプラクティスがあるのか​​ 疑問に思います。

4

2 に答える 2

3

次のいずれかの HTML イメージ マップを使用できます。

http://en.wikipedia.org/wiki/Image_map

または、絶対配置を使用してマップ イメージの上にリンクを配置するだけです。

私はおそらく絶対配置方法を使用し、カスタム スタイルのアンカー タグを必要な場所に配置し、赤い X をアンカー内の画像として、またはアンカーの背景画像として使用できます。

于 2013-04-30T15:54:17.417 に答える
1

http://qtip2.com/demosで qTip2 を使用したデモを次に示します。

HTML:

<div id="demo-imagemap">
 <h3>ClICK TO TOGGLE X to see </h3>

<img border="0" usemap="#myMap" alt="map" src="http://4.bp.blogspot.com/-Y6tP6TqJbfA/UX_vggdXEQI/AAAAAAAAAt4/ZfoonzP4Bxs/s1600/ih2LH.jpg">
<map id="myMap" name="myMap">
    <area alt="place 1" shape="rect" coords="192,103,216,119" href="#">
    <area alt="place 2" shape="rect" coords="128,269,156,293" href="#">
    <area alt="place 3" shape="rect" coords="162,311,186,327" href="#">
    <area alt="place 4" shape="rect" coords="172,207,200,235" href="#">
    <area alt="place 5" shape="rect" coords="270,225,312,259" href="#">
</map>

CSS:

 /* Add some nice box-shadow-ness to the modal tooltip */
 #ui-tooltip-modal {
    max-width: 420px;
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
}
#ui-tooltip-modal .ui-tooltip-content {
    padding: 10px;
}

jQuery:

    // Create the tooltips only when document ready
$(document).ready(function () {
    // We'll target all AREA elements with alt tags (Don't target the map element!!!)
    $('area[alt]').qtip({
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content

        },
        show: 'click',
        hide: 'click',

        style: {
            classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
        }
    });
});

マップを使用してデモを行い、中央に配置された X と左側のいくつかを試してください:- http://jsfiddle.net/x5baU/11/

于 2013-04-30T16:28:10.267 に答える