如何在圖像的選定區域上的文本上添加鼠標？

Question

我有這張圖片，我想在此圖像的選定區域上的文字上添加鼠標。

例如，如果您查看此圖像並將鼠標懸停在字母A上，我想在一個框中添加一個小的描述。這是怎麼做的？

有人可以請幫忙。

感謝

Answer 1

這裏是我的解決方案你的問題。 DEMO（顯示如何用2分完成）

它涉及到一個相對定位的div與您的圖像作爲背景。然後有一些絕對定位的「懸停點」觸發了工具提示。

一旦你得到這個工作，你可以刪除紅色的邊框和樣式的工具提示，但是你想。

HTML

<div id="image"> 
    <div class="hoverPoint" style="top:312px;left:178px;" data-content="This is a test (A)"></div> 
    <div class="hoverPoint" style="top:37px;left:379px;" data-content="This is a test (C)"></div> 
    <div id="tooltip"></div>  
</div> 

jQuery的

$('.hoverPoint').mouseenter(function(){ 
    $('#tooltip') 
     .css({ 
      top: ($(this).position().top-30) + 'px', 
      left: $(this).position().left + 'px' 
     }) 
     .html($(this).data('content')) 
     .show(); 
}).mouseleave(function(){ 
    $('#tooltip') 
     .html('') 
     .hide(); 
}); 

CSS

#image{ 
    background:url(http://oi44.tinypic.com/2ur9to5.jpg) no-repeat; 
    width:888px; 
    height:441px; 
    position:relative; 
} 
#tooltip{ 
    position:absolute; 
    background:#fff; 
    border:1px solid #999; 
    padding:4px; 
    display:none; 
} 
.hoverPoint{ 
    position:absolute; 
    width:47px; 
    height:47px; 
    border:1px solid #f00; 
    cursor:pointer; 
} 

Answer 2

如何實現，與純CSS，只是用CSS定位正確設置圈上的三角形的邊緣，而且比現在用content: attr()財產，其中我打電話通過聲明的自定義屬性我是誰data-title，所以這一切，休息是自我解釋。

Demo

Demo 2（2點）

HTML

<div> 
    <img src="http://wilsonsch3u-01-2012.wikispaces.com/file/view/triangle.png" alt="" /> 
    <span data-title="This is a custom title"></span> 
</div> 

CSS

div { 
    width: 200px; 
    position: relative; 
} 

div img { 
    max-width: 100%; 
} 

div span { 
    height: 20px; 
    width: 20px; 
    background: #000; 
    border-radius: 50%; 
    position: absolute; 
    left: 5px; 
    bottom: 25px; 
    z-index: 1; 
} 

span:hover:after { 
    content: attr(data-title); 
    background: rgba(0,0,0,.4); 
    color: #fff; 
    font-size: 13px; 
    font-family: Arial; 
    width: 200px; 
    top: 15px; 
    padding: 10px; 
    position: absolute; 
} 

注意：您也可以做到這一點使用background-image代替img

Answer 3

使用：懸停選擇

CSS：

.divWithMessage:hover > .message { 
    display: block 
} 

HTML：

<div class="divWithMessage"> 
    A 
    <div class="message">This is a message. Use CSS to position it.</div> 
</div> 

Answer 4

獨特的方式，我知道這樣做是有點cumbe rsome來映射每個地區的點。 舉例來說，你可以想象一個約束樂器A的矩形。 如果圖像上的moouse進入這個點的範圍，你可以在這個位置附加一個DOM元素或者做一些事情。

例如，你能想象這樣的解決方案：

var zona1X = new Array(400, 438, 438, 394); 
var zona1Y = new Array(305, 355, 284, 280); 

var zona2X = new Array(450, 580, 580, 450); 
var zona2Y = new Array(360, 500, 270, 270); 

var zona3X = new Array(360, 370, 430, 400); 
var zona3Y = new Array(320, 390, 360, 320); 

然後

$('.yourElement').mousemove(function (e) { 
    var height = 545; //yourElementHeight 
    var x = e.offsetX; 
    var y = height - e.offsetY; 
    var isHover = false; 

    x += ($(e.srcElement).offset().left - $(this).offset().left); 
    y += ($(this).offset().top - $(e.srcElement).offset().top); 


    if (pnpoly(zona1X.length, zona1X, zona1Y, x, y) && !isHover) { 
     //Do some stuff! 
    } 

    if (pnpoly(zona2X.length, zona2X, zona2Y, x, y) && !isHover) { 
     //Do some stuff! 
    } 

    //etc... 

    if (isHover) { 
     $(this).css('cursor', 'pointer'); 
    } else { 
     $(this).css('cursor', 'auto'); 
    } 
}); 

，這是插值點功能：

function pnpoly(nvert, vertx, verty, testx, testy) { 
    var i, j, c = false; 
    for (i = 0, j = nvert - 1; i < nvert; j = i++) { 
     if (((verty[i] > testy) != (verty[j] > testy)) && 
     (testx < (vertx[j] - vertx[i]) * (testy - verty[i])/(verty[j] - verty[i]) + vertx[i])) { 
      c = !c; 
     } 
    } 
    return c; 
}