お願いします!JQueryのツールチップは、イメージマップ上に表示されるホバーアイテムをカスタマイズします
ユーザーがイメージマップメニューの上にカーソルを置いたときにテキストの位置を変更しようとすると、すべてが一致してイメージの中央に表示されるようになります。
私はCSSを追加するときに、個々の反応が異なるため、再配置できませんでした。
境界線のないテーマの黒い枠内にホバーボックスを置いて、ユーザーがメニュー項目の間を移動するときにイメージマップの上に白い文字が表示されるようにしたいのが理想的です。
ありがとうございます!
$(document).ready(function() {
$('.tooltip').tooltipster({
theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});
});
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
background:black;
Border:0;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
color: white;
font-family: "josefin sans";
font-size: 3rem;
Border:0;
}
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />
<img src="https://i.stack.imgur.com/JRo8A.png" id="logo" style="width: 260px; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
<area shape="circle" coords="243,132,41" href="Konpakutotrack.html" class="tooltip" title="Track" />
<area shape="circle" coords="189,223,41" alt='' href="Konpakutoinsurance.html" class="tooltip" title="Insurance Cov."/>
<area shape="circle" coords="69,205,29" alt='' href='Konpakutohealth.html' class="tooltip" title="Health"/>
<area shape="circle" coords="9,131,42" alt='' href='Konpakutounlocklock.html' class="tooltip" title="Lock" />
<area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="Home" />
</map>
</div>
</body>
</html>
'.tooltipster-noir-customized'に' border:0; 'を追加すると、達成しようとしていることが達成されるはずです。 – azs06
ありがとう私はそれを試してみましょう – harry
こんにちはAzs06 didntの仕事 – harry