Выделение области изображения на основе текста поиска

Это новый вопрос, связанный с другим вопросом, на который только что ответил here.Выделение области изображения на основе текста поиска

Я работаю над тем, чтобы выделить <div> на основе текста поиска. Мы достигли этого, благодаря Алексу.

Теперь я пытаюсь применить ту же концепцию к отображаемым координатам на карте изображения.

Существует 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, вы можете использовать плагин jQuery Maphilight (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

Я имею в виду, что вы должны использовать изображение без атрибутов width и height или 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.

Это невозможно сделать с помощью jQuery, насколько я знаю, но с обычным Javascript. Ключ:

<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

Выделение области изображения на основе текста поиска

ответ

Смежные вопросы