根據搜索文本突出顯示圖像地圖的區域

這是一個新問題，來自剛剛回答的另一個問題here。根據搜索文本突出顯示圖像地圖的區域

我正在根據搜索文本突出顯示<div>。我們已經完成了，感謝Alex。

現在，我試圖將相同的概念應用於圖像映射上的映射座標。

有一個jsfiddle here。

這裏的JS（jQuery的1.10.2）...

function doSearch(text) { 
    $('#content div').removeClass('highlight'); 
    $('#content div:contains(' + text + ')').addClass('highlight'); 
}

來源

2013-08-28 webfrogs

如果你想要一個沒有SVG的方法，你可以使用MaphilightjQuery插件（GitHub）。

我已更新您的jsFiddle。

function doSearch(text) { 
    $('#content div').removeClass('highlight'); 
    $('#content div:contains(' + text + ')').addClass('highlight'); 

    $('#Map area').mouseout(); 
    $('#Map area[data-text*="' + text + '"]').mouseover(); 
} 
$(function() { 
    $('#imgmap').maphilight({ stroke: false, fillColor: "ffff00", fillOpacity: 0.6 }); 
});

注：爲了更好的結果，只是用一個更大的圖片，因爲你bunny.jpg是太小了，你已經被迫與高度/寬度屬性大小。

來源

2013-08-28 23:35:04 Grigur

爲什麼它在小提琴中重複圖像。你說我應該使用更大的圖像...我調整了圖像的大小，並將其設置爲'width =「100％」'和'height =「auto」'，並將圖像重複遍佈整個頁面。這是包含在外部maphilight.js腳本中的東西嗎？ – webfrogs

我的意思是你必須使用沒有寬度和高度屬性或CSS的圖像。只需在使用圖像編輯器之前調整圖像大小。這似乎是Maphilight的限制。 – Grigur

我已經找到Maphilight調整大小問題的解決方案** [這裏]（https://github.com/kemayo/maphilight/issues/8）**。您必須更改Maphilight代碼，在第156行左右應添加以下代碼： 'backgroundSize：this.width +「px」+ this.height +「px」，' – Grigur

這是不可能的圖像，地圖和區域因素，因爲這些是不可見的元素，不能有子元素，也不是風格。你必須做很多複雜的東西描述here

但它利用現代嵌入式SVGs可能 - 幾乎所有的瀏覽器不支持它現在。甚至IE。

我用Chromium和Firefox測試了它。

就我所知，通常使用Javascript無法通過jQuery幫助完成。最關鍵的是：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="663px" height="663px"> 
     <image xlink:href="http://webfro.gs/south/kb2/images/bunny.jpg" x="0" y="0" width="663" height="663" /> 
     <circle class="office" cx="504" cy="124" r="94" /> 
     <circle class="fire-exit" cx="168" cy="150" r="97" /> 
     <circle class="main-exit" cx="378" cy="589" r="48" /> 
</svg>

var svgns="http://www.w3.org/2000/svg"; 
var areas = document.getElementsByTagNameNS(svgns, 'circle'); 
$(areas).each(function(elem) { 
    if(areas[elem].className.baseVal === text) { 
     areas[elem].className.baseVal += ' highlightsvg'; 
    } else { 
     areas[elem].className.baseVal = areas[elem].className.baseVal.replace(' highlightsvg', ''); 
    } 

});

見here in the JSFiddle。這是你想要的方式嗎？

來源

2013-08-28 23:00:31 SeDav

是的。這是一個很好的開始。我將盡快實施。我會回來的。歡迎來到SO！ – webfrogs

根據搜索文本突出顯示圖像地圖的區域

回答

相關問題