帶HTML區域地圖並轉換爲d

我有一個使用矩形座標的區域地圖來突出顯示佔用的平面圖的表格。被佔用的表格將在您懸停時顯示公司的名稱。很簡單。帶HTML區域地圖並轉換爲d

我想要做的是採取這些座標，並使用div類爲每個表的座標，有一個較暗的不透明度在它的視覺參考。計算每個表格的頂部/左側值以及計算寬度和高度非常簡單。我只是不知道如何在jQuery中添加這些值來添加此功能。這是一段代碼片段。

<img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" /> 
<map name="fp" id="fp"> 
    <area shape="rect" coords="419,264,439,285" href="javascript://" title="Booth 73" alt="Booth 73" /> 
    <area shape="rect" coords="141,366,164,385" href="javascript://" title="Booth 62" alt="Booth 62" /> 
    <area shape="rect" coords="119,385,142,402" href="javascript://" title="Booth 64" alt="Booth 64" /> 
</map>

來源

2012-01-13 Angry Spartan

什麼是「d」？您的問題標題是否需要修改？ – 2012-01-13 22:23:31

如果你要疊加div，爲什麼還要使用圖像映射？ – Eric 2012-01-13 23:00:12

圖像映射主要是由於遺留問題。而格雷格B，我忘了在發佈之前完成標題，因爲代碼示例更重要。抱歉。 – 2012-01-16 15:44:06

不要打擾圖像映射。有沒有點：

<div class="map"> 
    <img src="images/floor_plan_2011_small.png" /> 
    <a style="top:419px; right:264px; height:20px; width:21px" href="javascript://" title="Booth 73" /> 
    <a style="top:141px; right:366px; height:23px; width:19px" href="javascript://" title="Booth 62" /> 
    <a style="top:119px; right:385px; height:23px; width:27px" href="javascript://" title="Booth 64" /> 
</div>

添加到您的樣式表，你就大功告成了：

.map { 
    position: relative; 
} 
.map a{ 
    position: absolute; 
    display: block; 
    background: black; 
    opacity: 0.1; 
} 
.map a:hover{ 
    opacity: 0.5; 
}

來源

2012-01-13 23:14:40 Eric

工作得很好。簡單而乾淨。 – 2012-01-16 15:43:13

如果你添加一個容器到圖像，您可以覆蓋通過JavaScript（或CSS）追加到圖片：

<span id="img-span"><img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" /></span> 
<map name="fp" id="fp"> 
    <area shape="rect" coords="419,264,439,285" href="#" title="Booth 73" alt="Booth 73" /> 
    <area shape="rect" coords="141,366,164,385" href="#" title="Booth 62" alt="Booth 62" /> 
    <area shape="rect" coords="119,385,142,402" href="#" title="Booth 64" alt="Booth 64" /> 
</map>

JS--

//cache the span wrapper so it only has to be selected once 
var $imgSpan = $('#img-span'); 

//bind a mouseleave event handler to the image map so when the user moves the cursor away from the image map the overlays will be removed 
$('#fp').on('mouseleave', function() { 
    $imgSpan.children('.overlay').remove(); 

//bind a mouseenter event handler to the image map area tags to create an overlay 
}).children('area').on('mouseenter', function() { 
    var $this = $(this); 
    $imgSpan.children('.overlay').remove() 
      .prepend('<div class="overlay" style="top: ' + $this.css('top') + '; left: ' + $this.css('left') + '; width: ' + $this.css('width') + '; height: ' + $this.css('height') + ';"></div>'); 
});

CSS- -

#img-span .overlay { 
    position : absolute; 
    opacity : 0.6; 
    filter : alpha(opacity=60); 
    z-index : 1000; 
}

說明：.on()是jQuery 1.7中的新增功能，在這種情況下與.bind()相同。

而且-注：我從來沒有使用圖像映射，所以我不知道，讓他們的top/left/width/height樣式屬性是可能的，如果沒有，那麼你可以得到的coords屬性（$(this).attr('coords')）並將其解析爲適當的信息。

來源

2012-01-13 22:10:02 Jasper

帶HTML區域地圖並轉換爲d

回答

相關問題