Question

我想单击图像的一部分并找回图像标题。

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://www.123dentist.com/wp-content/uploads/2017/06/teeth-numbering-systems.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="11" title="11" href="" coords="456,307,500,302,429,75,323,99" shape="poly">
    <area target="" alt="12" title="12" href="" coords="433,326,452,307,443,276,282,122,200,175" shape="poly">
    <area target="" alt="13" title="13" href="" coords="407,351,141,242,188,185,410,307,429,326" shape="poly">
    <area target="" alt="14" title="14" href="" coords="397,393,411,357,139,248,119,307" shape="poly">
    <area target="" alt="15" title="15" href="" coords="381,435,396,394,113,308,94,371" shape="poly">
    <area target="" alt="16" title="16" href="" coords="377,483,381,434,90,379,86,444" shape="poly">
    <area target="" alt="17" title="17" href="" coords="369,542,378,483,82,457,83,522" shape="poly">
    <area target="" alt="18" title="18" href="" coords="373,595,372,543,88,529,85,590" shape="poly">
</map>

Answer 1

您差不多完成了。您只需要一些JavaScript即可抓取所有FileOutputStream fileOut = null; try { // Create a new workbook HSSFWorkbook workbook = new HSSFWorkbook(); // create styles to use in work book Map<String, HSSFCellStyle> styles = createStyles(workbook); HSSFSheet worksheet = null; if (individualVOList != null && !individualVOList.isEmpty()) { worksheet = workbook.createSheet(DBElement.INDIVIDUALS.getName()); // Construct the header for the report constructPageHeader(worksheet, styles.get("pageTitle"), DBElement.INDIVIDUALS.getName()); constructTableContent(worksheet, styles, individualVOList); } fileOut = new FileOutputStream(excelFile); workbook.write(fileOut); fileOut.close(); status = true; } catch (FileNotFoundException ex) { System.out.println("[PL] - FileNotFoundException " + ex); } catch (IOException ex) { System.out.println("[PL] - IOException " + ex); }标记并向其添加点击处理程序。

然后阻止默认导航，而是抓住标题并显示它。

area

const areas = document.querySelectorAll("area");
areas.forEach(area => area.addEventListener("click", show));

function show(event) {
  event.preventDefault();
  alert(event.currentTarget.title);
}

Answer 2

不确定jQuery，但是如果您向地图元素添加点击处理程序，则可以从title属性中获取event.target。为了向用户提供单击提示的提示，请将CSS中AREA元素的光标更改为非默认值。可以删除href个属性。

area {
    cursor: pointer;
}

<img
  width="500" height="500"
  src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEX8LSsK/jRMrvz8/vz8/nQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAADfVMiEAAAASklEQVR42mNwQQMMRAg4MAABkQKCQCCCS0AJBKgo4OLipKSEIWBsbGyEKaCkBPUcmoAjSCXNBBggAIeAIFA9qQIg83EJIGKEXAEAaERNUjAsUg8AAAAASUVORK5CYII="
  usemap="#image-map">

<map name="image-map" onclick="console.log(event.target.title)">
    <area target="" alt="11" title="11" coords="456,307,500,302,429,75,323,99" shape="poly">
    <area target="" alt="12" title="12" coords="433,326,452,307,443,276,282,122,200,175" shape="poly">
    <area target="" alt="13" title="13" coords="407,351,141,242,188,185,410,307,429,326" shape="poly">
    <area target="" alt="14" title="14" coords="397,393,411,357,139,248,119,307" shape="poly">
    <area target="" alt="15" title="15" coords="381,435,396,394,113,308,94,371" shape="poly">
    <area target="" alt="16" title="16" coords="377,483,381,434,90,379,86,444" shape="poly">
    <area target="" alt="17" title="17" coords="369,542,378,483,82,457,83,522" shape="poly">
    <area target="" alt="18" title="18" coords="373,595,372,543,88,529,85,590" shape="poly">
</map>

我想单击图像的一部分以获得标题

2 个答案: