有没有办法使用 HTML 文件在 Rails 上的 Ruby 中创建多边形目标区域？
Is there a way to create polygon target areas in Ruby on Rails with a HTML file?
所以我正在尝试制作新泽西州的交互式地图，可以点击该州的一个县，它会带您到不同的页面。该文件在普通 HTML 中工作正常，可以单击该县并链接到单独的页面。尝试在 rails 上的 ruby 上使用它是行不通的。它只显示图片本身，没有可用的交互。
<%=image_tag("Map.jpg", :alt=>"#image-map")%>
<map name="image-map">
<area target="" alt="Cape May County" title="Cape May County" href="https://www.capemaycountyherald.com/news/crime/" coords="172,863,196,861,226,838,225,827,228,817,240,799,249,784,257,766,261,760,273,751,278,743,274,735,252,741,240,739,228,735,207,733,199,732,195,744" shape="poly">
<area target="" alt="Cumberland County" title="Cumberland County" href="" coords="49,692,52,708,55,715,59,724,68,716,75,729,81,738,91,734,96,744,103,745,107,750,113,757,121,766,127,770,136,765,147,765,158,765,170,772,179,771,161,773,178,760,186,753,189,738,193,729,197,711,197,697,192,687,181,677,148,646,140,682,80,663,136,680,98,650" shape="poly">
<area target="" alt="Atlantic County" title="Atlantic County" href="" coords="179,669,188,679,196,685,200,695,201,715,212,731,237,735,260,735,270,734,280,733,287,731,299,725,311,721,321,715,328,708,334,699,342,685,345,679,346,670,232,590,173,654" shape="poly">
<area target="" alt="Ocean County" title="Ocean County" href="" coords="290,466,293,473,300,493,303,505,310,517,318,535,323,548,327,566,328,577,330,601,330,614,327,647,329,655,349,656,359,652,367,647,379,632,381,622,386,609,390,601,394,593,398,583,407,564,410,552,410,537,409,522,409,508,413,481,415,466,423,457,296,453,312,444,319,437,329,432,336,429,344,429,358,432,367,451,395,452,403,453,302,457" shape="poly">
<area target="" alt="Burlington County" title="Burlington County" href="" coords="253,438,271,449,276,462,282,476,289,498,302,531,321,567,325,589,324,607,323,625,310,639,290,627,282,616,278,612,266,605,239,590,231,584,225,577,219,563,195,554,187,542,182,528,173,518,169,509,162,500,154,488" shape="poly">
<area target="" alt="Salem County" title="Salem County" href="" coords="49,570,36,579,32,588,29,597,22,612,15,621,27,635,17,677,44,695,78,661,93,648,98,641,121,662,135,666,138,660,138,651,141,645,141,638,74,604,64,589,53,577" shape="poly">
<area target="" alt="Gloucester County" title="Gloucester County" href="" coords="51,559,59,571,65,582,71,591,100,606,113,609,124,616,134,624,146,638,165,654,190,633,179,604,135,561,114,534,77,547,68,549" shape="poly">
<area target="" alt="Monmouth County" title="Monmouth County" href="" coords="438,347,436,358,438,369,438,383,430,410,427,420,422,445,414,450,409,444,400,438,392,448,371,443,362,427,345,425,311,435,284,455,273,427,321,390,366,352,376,339,409,334" shape="poly">
<area target="" alt="Sussex County" title="Sussex County" href="" coords="246,10,268,24,284,38,305,47,329,59,319,72,311,76,306,91,296,99,284,115,273,128,250,159,243,163,225,162,221,155,202,138,194,123,182,109,172,102,209,40" shape="poly">
<area target="" alt="Bergen County" title="Bergen County" href="" coords="391,97,403,108,412,111,426,116,439,124,462,144,456,157,448,179,436,204,406,205,390,139,366,125,372,93" shape="poly">
<area target="" alt="Passaic County" title="Passaic County" href="" coords="363,133,359,144,360,157,366,169,396,190,386,146,327,126,303,109,335,67,352,76,360,80,368,89" shape="poly">
<area target="" alt="Mercer County" title="Mercer County" href="" coords="187,372,197,373,208,399,221,406,232,420,243,422,254,423,261,433,277,418,298,405,300,396,273,389,258,356,244,366,229,346,211,357" shape="poly">
<area target="" alt="Hunterdon County" title="Hunterdon County" href="" coords="120,277,144,261,165,243,180,231,189,223,201,222,218,230,231,238,235,269,235,292,224,304,213,309,221,329,218,339,187,366,149,334,143,288,115,284" shape="poly">
<area target="" alt="Camden County" title="Camden County" href="" coords="128,511,132,541,143,555,153,568,159,577,168,584,178,593,189,606,196,622,230,585,212,570,186,568,183,559,178,539,168,517,152,499" shape="poly">
<area target="" alt="Warren County" title="Warren County" href="" coords="130,139,141,159,145,165,154,177,154,188,142,190,145,202,114,219,118,237,113,255,117,261,133,260,146,247,171,236,177,219,181,209,189,207,199,200,207,188,220,166,205,152,207,150,199,139,187,133,183,124,170,109,147,129" shape="poly">
<area target="" alt="Morris County" title="Morris County" href="" coords="206,199,212,195,218,183,221,174,229,161,237,162,254,167,264,163,265,149,273,141,273,134,282,126,297,113,318,127,327,129,344,135,354,148,348,155,354,166,346,166,341,189,329,210,326,223,324,234,293,254,296,214,237,232,201,212" shape="poly">
<area target="" alt="Union County" title="Union County" href="" coords="326,273,355,277,378,272,391,248,367,239,356,237,332,233,313,250" shape="poly">
<area target="" alt="Middlesex County" title="Middlesex County" href="" coords="279,343,308,324,316,313,307,300,299,287,321,283,344,279,359,285,372,283,363,291,363,307,365,331,364,344,342,369,312,397,268,366" shape="poly">
<area target="" alt="Hudson County" title="Hudson County" href="" coords="397,255,403,239,392,224,396,219,423,204,435,209,425,234,407,258" shape="poly">
<area target="" alt="Somerset County" title="Somerset County" href="" coords="245,290,237,297,226,306,223,320,238,353,267,353,282,334,289,325,306,317,293,302,292,280,318,263,284,256,287,238,277,226,258,230,242,234,239,259,241,274" shape="poly">
<area target="" alt="Essex County" title="Essex County" href="" coords="336,209,351,174,372,180,394,199,383,208,396,242,345,232,337,220" shape="poly">
</map>
感谢任何帮助！
在您的 ERB 代码中将 :alt 更改为 :usemap
所以我正在尝试制作新泽西州的交互式地图，可以点击该州的一个县，它会带您到不同的页面。该文件在普通 HTML 中工作正常，可以单击该县并链接到单独的页面。尝试在 rails 上的 ruby 上使用它是行不通的。它只显示图片本身，没有可用的交互。
<%=image_tag("Map.jpg", :alt=>"#image-map")%>
<map name="image-map">
<area target="" alt="Cape May County" title="Cape May County" href="https://www.capemaycountyherald.com/news/crime/" coords="172,863,196,861,226,838,225,827,228,817,240,799,249,784,257,766,261,760,273,751,278,743,274,735,252,741,240,739,228,735,207,733,199,732,195,744" shape="poly">
<area target="" alt="Cumberland County" title="Cumberland County" href="" coords="49,692,52,708,55,715,59,724,68,716,75,729,81,738,91,734,96,744,103,745,107,750,113,757,121,766,127,770,136,765,147,765,158,765,170,772,179,771,161,773,178,760,186,753,189,738,193,729,197,711,197,697,192,687,181,677,148,646,140,682,80,663,136,680,98,650" shape="poly">
<area target="" alt="Atlantic County" title="Atlantic County" href="" coords="179,669,188,679,196,685,200,695,201,715,212,731,237,735,260,735,270,734,280,733,287,731,299,725,311,721,321,715,328,708,334,699,342,685,345,679,346,670,232,590,173,654" shape="poly">
<area target="" alt="Ocean County" title="Ocean County" href="" coords="290,466,293,473,300,493,303,505,310,517,318,535,323,548,327,566,328,577,330,601,330,614,327,647,329,655,349,656,359,652,367,647,379,632,381,622,386,609,390,601,394,593,398,583,407,564,410,552,410,537,409,522,409,508,413,481,415,466,423,457,296,453,312,444,319,437,329,432,336,429,344,429,358,432,367,451,395,452,403,453,302,457" shape="poly">
<area target="" alt="Burlington County" title="Burlington County" href="" coords="253,438,271,449,276,462,282,476,289,498,302,531,321,567,325,589,324,607,323,625,310,639,290,627,282,616,278,612,266,605,239,590,231,584,225,577,219,563,195,554,187,542,182,528,173,518,169,509,162,500,154,488" shape="poly">
<area target="" alt="Salem County" title="Salem County" href="" coords="49,570,36,579,32,588,29,597,22,612,15,621,27,635,17,677,44,695,78,661,93,648,98,641,121,662,135,666,138,660,138,651,141,645,141,638,74,604,64,589,53,577" shape="poly">
<area target="" alt="Gloucester County" title="Gloucester County" href="" coords="51,559,59,571,65,582,71,591,100,606,113,609,124,616,134,624,146,638,165,654,190,633,179,604,135,561,114,534,77,547,68,549" shape="poly">
<area target="" alt="Monmouth County" title="Monmouth County" href="" coords="438,347,436,358,438,369,438,383,430,410,427,420,422,445,414,450,409,444,400,438,392,448,371,443,362,427,345,425,311,435,284,455,273,427,321,390,366,352,376,339,409,334" shape="poly">
<area target="" alt="Sussex County" title="Sussex County" href="" coords="246,10,268,24,284,38,305,47,329,59,319,72,311,76,306,91,296,99,284,115,273,128,250,159,243,163,225,162,221,155,202,138,194,123,182,109,172,102,209,40" shape="poly">
<area target="" alt="Bergen County" title="Bergen County" href="" coords="391,97,403,108,412,111,426,116,439,124,462,144,456,157,448,179,436,204,406,205,390,139,366,125,372,93" shape="poly">
<area target="" alt="Passaic County" title="Passaic County" href="" coords="363,133,359,144,360,157,366,169,396,190,386,146,327,126,303,109,335,67,352,76,360,80,368,89" shape="poly">
<area target="" alt="Mercer County" title="Mercer County" href="" coords="187,372,197,373,208,399,221,406,232,420,243,422,254,423,261,433,277,418,298,405,300,396,273,389,258,356,244,366,229,346,211,357" shape="poly">
<area target="" alt="Hunterdon County" title="Hunterdon County" href="" coords="120,277,144,261,165,243,180,231,189,223,201,222,218,230,231,238,235,269,235,292,224,304,213,309,221,329,218,339,187,366,149,334,143,288,115,284" shape="poly">
<area target="" alt="Camden County" title="Camden County" href="" coords="128,511,132,541,143,555,153,568,159,577,168,584,178,593,189,606,196,622,230,585,212,570,186,568,183,559,178,539,168,517,152,499" shape="poly">
<area target="" alt="Warren County" title="Warren County" href="" coords="130,139,141,159,145,165,154,177,154,188,142,190,145,202,114,219,118,237,113,255,117,261,133,260,146,247,171,236,177,219,181,209,189,207,199,200,207,188,220,166,205,152,207,150,199,139,187,133,183,124,170,109,147,129" shape="poly">
<area target="" alt="Morris County" title="Morris County" href="" coords="206,199,212,195,218,183,221,174,229,161,237,162,254,167,264,163,265,149,273,141,273,134,282,126,297,113,318,127,327,129,344,135,354,148,348,155,354,166,346,166,341,189,329,210,326,223,324,234,293,254,296,214,237,232,201,212" shape="poly">
<area target="" alt="Union County" title="Union County" href="" coords="326,273,355,277,378,272,391,248,367,239,356,237,332,233,313,250" shape="poly">
<area target="" alt="Middlesex County" title="Middlesex County" href="" coords="279,343,308,324,316,313,307,300,299,287,321,283,344,279,359,285,372,283,363,291,363,307,365,331,364,344,342,369,312,397,268,366" shape="poly">
<area target="" alt="Hudson County" title="Hudson County" href="" coords="397,255,403,239,392,224,396,219,423,204,435,209,425,234,407,258" shape="poly">
<area target="" alt="Somerset County" title="Somerset County" href="" coords="245,290,237,297,226,306,223,320,238,353,267,353,282,334,289,325,306,317,293,302,292,280,318,263,284,256,287,238,277,226,258,230,242,234,239,259,241,274" shape="poly">
<area target="" alt="Essex County" title="Essex County" href="" coords="336,209,351,174,372,180,394,199,383,208,396,242,345,232,337,220" shape="poly">
</map>
感谢任何帮助！
在您的 ERB 代码中将 :alt 更改为 :usemap