2

TwitterのBootstrapパックとマップした画像を組み合わせて、一部をロールオーバーすると、マップされた領域の横にポップオーバー/ツールチップが生成されるようにしようとしています。これが私がこれまでにしたことです：

  1. 古いイメージマップの方法の代わりにCSSを使用してマップしました。コードは以下のとおりです。
  2. 画像とその上の領域が表示され、ロールオーバーするとハイライト表示されます。

これでポップオーバーを表示することができましたが、元の画像の位置が変更されている場合でも、常に画像の左上に固定されています。

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Image Map</title>

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

<link href="demo.css" rel="stylesheet">
<link href="style_common.css" rel="stylesheet">
<link href="style5.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div id="wrapper">
            <a href="#" id="jon" rel="popover" data-original-title="Milage Rate"
                data-content="Content..."><div id="milagerate"></div></a> <a
                href="#"><div id="fairmarketvalue"></div></a> <a href="#"><div
                    id="netassessment"></div></a> <a href="#"><div id="adjustedfmv"></div></a>
            <a href="#"><div id="exemptions"></div></a> <a href="#"><div
                    id="taxablevalue"></div></a>
        </div>
    </div>

    <script src="jquery-1.7.2.js"></script>
    <script src="bootstrap/js/bootstrap-tooltip.js"></script>
    <script src="bootstrap/js/bootstrap-popover.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#jon').popover({
                placement : 'bottom'
            });
        });
    </script>
</body>
</html>

CSS：

@CHARSET "ISO-8859-1";

a {
    color:white;
}

#wrapper{
    background:white url(PB.jpg) no-repeat 0 0;
    position:relative;
    z-index:0;
    width:530px;
    height:570px;
}

#milagerate {
    position:absolute;
    width:27px;
    height:17px;
    top:346px;
    left:347px;
}

#fairmarketvalue {
    position:absolute;
    width:56px;
    height:15px;
    top:319px;
    left:177px;
}

#netassessment {
    position:absolute;
    width:50px;
    height:17px;
    top:346px;
    left:194;
}

#adjustedfmv {
    position:absolute;
    width:51px;
    height:17px;
    top:346px;
    left:141px;
}

#exemptions {
    position:absolute;
    width:51px;
    height:17px;
    top:346px;
    left:245px;
}

#taxablevalue {
    position:absolute;
    width:51px;
    height:17px;
    top:346px;
    left:295px;
}

#milagerate:hover, #fairmarketvalue:hover, #netassessment:hover, #adjustedfmv:hover, #exemptions:hover, #taxablevalue:hover {
    border:1px solid red;
}

マップされた領域の横にポップオーバーを強制的に表示するにはどうすればよいですか？

4

2 に答える 2

2

さて、私はいくつかの助けを得て、私が最初に抱えていた問題を修正しました。私の問題は、ポップオーバーコードがコンテンツではなくアンカー（画像）に関連付けられていたことです。そうは言っても、コンテンツの各部分に個別のIDを使用する必要がありました。

<script type="text/javascript">
    $(function() {
        $('#jon').popover({
            placement : 'right'
        });

        $('#jon2').popover({
            placement : 'right'
        });

        $('#jon3').popover({
            placement : 'right'
        });

        $('#jon4').popover({
            placement : 'right'
        });

        $('#jon5').popover({
            placement : 'right'
        });

        $('#jon6').popover({
            placement : 'right'
        });
    });
</script>

そしてCSSでは、私はこのパターンに従いました：

...
#thing1, #jon3 {
    position:absolute;
    width:50px;
    height:17px;
    top:346px;
    left:194px;
}

#thing2, #jon4 {
    position:absolute;
    width:51px;
    height:17px;
    top:346px;
    left:141px;
}
...

この問題に取り組むためのより洗練された方法があると確信していますが、今のところ、このコードは私にとって完璧に機能します。

于 2012-07-27T15:18:49.010 に答える
1

「配置」属性を使用します

こちらのtootipのドキュメントを参照してください：http ：//twitter.github.com/bootstrap/javascript.html#tooltips

于 2012-07-27T13:50:02.850 に答える