私はこのすべてのものに慣れていません。ヨーロッパの財務状況に関する SVG を使用してマップを作成する必要があります。すべてのデータを取得しました。現在、マップは正常に機能しています。人口、GDP などの国固有のデータをマップの片側のボックスに表示することもできます。
ただし、ユーザーが特定の国にマウスを移動またはホバーしたときに、このデータをツール ヒントとして表示する必要があります。各国のマウスホバーでデータを表示し、マウスアウトイベントで非表示にするようなものです。私のコードの一部を以下に示します。
<title id="title">Countries of Europe</title>
<defs><script>
<![CDATA[
var country = [];
country[0]=["Abbreviation","Name","GDP","Population","Eurozone","Public Debit","Unemployment","Rating"];
country[117]=["fi","Finland",239,5302545,"yes",48.6,7.6,"AAA"];
country[118]=["de","Germany",3315,82217800,"yes",81.2,5.6,"AAA"];
function myShowValues(myEvent)
{
var myScrId = myEvent.target.getAttribute('id').replace(/c/,'1');
document.getElementById('myLegCantName').firstChild.data = '' + country[myScrId][1]+ '' ;
document.getElementById('gdp').firstChild.data='GDP: ' + country[myScrId][2]+' Billions of $US';
document.getElementById('unem').firstChild.data='Unemployment: ' + country[myScrId][6]+' %';
document.getElementById('sp').firstChild.data='S & P rating: ' + country[myScrId][7]+' ';
document.getElementById('pd').firstChild.data='Public debt: ' + country[myScrId][5]+' % of GDP';
}
function changeopa(evt)
{
evt.target.setAttribute("opacity", "0.5")
myShowValues(evt);
}
function info(evt)
{
var box= evt.target;
}
]]>
</script></defs>
次に、以下のようなこれらの関数を使用しています。
<rect id="ocean" x="-371.388" y="-44.213" fill="aliceblue" width="1222.493" height="783.168">
</rect>
<!-- EU Countries Below - arranged in alphabetical order -->
<!-- ISO-3116-1-ALPHA2 code - .de (Germany) -->
<path id="118" fill="#00CC00" stroke="#FFFFFF" stroke-width="0.7"
onmouseover="changeopa(evt)"
onmouseout="evt.target.setAttribute('opacity', '1.0');"
d="M319.59,396.925c0.283,2.263,2.547,6.647,2.829,8.063 c0.425,3.395-4.102,5.658-3.111,8.346c0.565,1.697,5.94,2.404,5.94,4.526c0,2.121-1.697,2.829-0.424,4.385 c0.424,0.707,1.414,0.99,1.697,1.839c0.424,0.707-0.142,1.697,0,2.404c0.142,0.425,0.707,0.283,0.849,0.566 c0.707,0.99-0.99,3.395-1.415,4.243c-0.849,1.273,1.273,1.98,1.697,3.254c0.283,0.707-0.707,1.556-0.282,2.121 c0.565,0.849,1.839,0.566,2.404,1.132c1.98,1.839,1.132,12.165-0.565,12.448c-1.839,0.424-4.81-7.355-6.365-2.971 c-0.283,0.707,2.263,1.272,1.697,1.697c-1.697,1.414-4.102,1.556-5.8,2.546c-0.282,0.142,0,0.849-0.282,0.99 c-1.132,0.565-2.688-0.283-3.537,0.425c-0.707,0.565-0.424,1.697-1.131,2.263c-0.283,0.283-0.566-0.707-0.99-0.565 c-1.273,0.282-1.415,1.98-2.264,2.546c-0.424,0.425-1.273-0.283-1.697,0.142c-0.424,0.283,0,1.132-0.424,1.556 c-0.566,0.707-2.122-0.565-2.547-0.565c-3.536,0.565-4.102,3.253-5.233,5.517c-0.283,0.565-0.283-1.415-0.849-1.839 c-0.424-0.566-1.273-0.707-1.98-0.849c-1.273-0.283,1.414,4.243,4.244,6.082c0.282,0.142,1.272,0.283,1.414,1.132 c0.424,1.98-1.414,1.272-1.697,2.829c-0.142,0.424,2.971,5.657,3.395,6.082c2.404,2.404,2.971,0.707,4.526,2.264 c0.99,0.989,1.132,2.546,2.122,3.395c2.264,1.556,8.346,3.678,8.204,7.355c-0.142,3.819-0.99,2.971-3.961,2.263 c-0.282,0-0.565,0.142-0.707,0.425c-0.283,1.414,0.565,2.971-0.849,4.103c-1.273,0.989-7.214,2.404-7.355,4.667 c0,0,3.395,4.668,3.395,4.81c0.142,0.142-1.839,1.839-1.131,2.404c1.556,1.415,3.111-0.707,1.838,3.961 c0,0.283-0.282,0.707-0.565,0.707c-4.526-1.272-0.99-3.536-3.112-3.678c-1.131,0-2.121,0.99-3.253,0.85 c-0.565-0.142-0.425-1.132-0.849-1.273c-0.849-0.283-1.697,0.424-2.404,0.142c-0.283-0.142,0.282-0.99,0-0.99 c-1.697,0.142-0.142,2.404-0.566,2.546c-1.98,0.565-5.233-0.283-7.072,0.425c-0.566,0.282-0.283,1.272-0.849,1.556 c-0.565,0.424-1.273-0.283-1.839,0.142c-0.425,0.142,0.142,0.849-0.142,1.132c-0.142,0.141-4.951,1.414-5.517,1.131 c-0.283-0.282,0-0.99-0.283-1.272c-0.141-0.283-0.849-0.283-0.99-0.566c-0.141-0.282,0.707-0.142,0.566-0.424 c-0.566-1.839-4.526,0.424-5.658-0.849c0,0,0.283-0.142,0.283-0.283c-0.85-0.565,0,1.839-0.283,2.829 c0,0.565-2.688,3.819-3.678,2.829c-0.566-0.566,0.99-1.415,0.565-1.98c-0.142-0.142-0.565,0.425-0.849,0.425 s-0.707-0.142-0.849-0.425c-0.282-0.425,0.707-0.99,0-1.556c-0.565-0.425-0.849-1.132-1.414-1.415 c-0.425-0.283-0.99,0.425-1.556,0.283c-0.283-0.283,0-0.99-0.283-1.273c-0.707-0.565-0.566,1.98-2.829,1.273 c-1.556-0.566-2.546-2.122-4.103-2.546c-0.142,0-4.809,0.282-4.809,0.282c-0.566-0.282-0.566-1.272-1.132-1.556 c-0.142-0.283,0.282,0.707,0,0.849c-0.283,0.142-0.849,0-0.99-0.283c-0.142-0.424,0.565-0.99,0.282-1.272 c-2.121-2.122-4.525,1.697-4.102,1.839c0.849,0.142,1.697-0.142,2.546,0c0.565,0.142-0.99,0.283-1.414,0.565 c-0.283,0.142,0.142,0.849,0,0.99c-3.536,1.839-0.99-0.849-3.819-0.707c-0.425,0-6.932,1.556-7.355,0.707 c-0.142-0.283,0.849-0.424,0.707-0.565c-1.273-0.99-1.839,3.253-1.839-1.697c-0.142-1.98,1.273-3.819,1.415-5.8 c0-0.283-0.566-0.283-0.566-0.707c-0.142-0.708,0.142-1.415,0.425-2.122l1.979-3.253c0.143-0.849,0.283-3.961,0.708-4.951 c1.132-2.264,3.96-3.961,5.517-6.648c0.565-0.99-7.922-1.98-8.487-2.404c-0.425-0.425-0.142-1.273-0.565-1.697 c-0.707-0.566-5.234,1.272-5.517,0.849c-0.142-0.425,0.424-0.99,0.142-1.273c-4.244-3.819-1.415,1.98-3.112,0.142 c-1.415-1.415-2.122-4.668-3.253-5.375c-0.425-0.425-1.273,0-1.557-0.425c-1.556-2.829,4.103-3.96,2.122-6.365 c-0.283-0.424-3.678-0.707-4.386-3.678c-1.272-5.233,5.234-4.95,3.254-8.204c-0.424-0.707-1.697-0.565-1.98-1.414 c-0.142-0.566,0.99-1.132,0.849-1.697c0-0.425-0.849,0.141-1.132-0.142c-0.141-0.142-2.121-3.112-1.979-3.536 c0.142-0.566,1.132-0.566,1.272-1.132c0.425-2.405-3.678-3.254-2.404-3.536c0.424-0.142,0.707,0.424,0.99,0.424l2.688-2.404 c0.142-0.707-1.697,0.142-1.132-0.99c0.425-0.99,1.415-1.697,1.839-2.688c1.273-3.112-1.839-5.375-2.688-6.932 c-0.142-0.282,0.142-0.707,0.283-0.99c0-0.282-0.283-0.707,0-0.849c0.707-0.424,1.556,0,2.404-0.282c0.283-0.142-0.283-0.99,0-0.849 c0.849,0.282,1.415,1.272,2.404,1.272c0.99,0.142,4.81-1.132,5.234-2.122c0.424-0.989-2.688-1.131-1.414-1.979 c2.263-1.557,4.95-2.122,4.385-5.658c-0.142-1.98-5.375-1.132-4.103-3.254c0.142-0.424,0.849,0,0.849-0.282 c0.142-0.425-0.565-0.849-0.424-1.273c0-0.283,0.424-0.283,0.707-0.283c0.99,0,1.839,0.425,2.829,0.425 c1.132,0,0.142-2.264,0.565-3.395c0.283-0.99,2.688-5.517,2.404-7.922c0.425-0.142,0.85-0.424,1.273-0.99 c0.566-0.565-0.707-0.282-1.98-0.282l0,0c-0.283-0.283-0.707-0.142-0.99-0.142c-0.282,0-0.424-0.142-0.565-0.283 c-1.132-1.414,1.98-5.8,3.112-6.365c0.707-0.424,1.556,0.425,2.263,0.425c10.608-0.425-11.033-1.273,5.093-0.849 c0.141,0,0.565,0.141,0.707,0.282c0.849,1.557,1.414,8.063,4.951,6.648c1.131-0.425-1.132-10.185,2.121-10.185 c0.283,0,0.283,0.849,0.707,0.99c0.425,0.283,1.132,0.283,1.697,0.283c1.415,0.282,2.971-1.132,4.244-0.566 c0.99,0.425,0.99,1.839,1.556,2.688c0.708,1.132,4.526,8.346,4.526,3.536c0-0.989-2.121-0.707-2.971-1.556 c-1.414-1.272-1.131-4.526-3.818-4.95c-0.425,0-3.678,0.707-3.396-1.273c0.142-1.273,2.122-5.233,0.849-6.79 c-0.424-0.424-3.536,1.132-3.96-0.424c-0.142-0.283,0.849,0,0.989-0.283c0.283-0.283-0.989-0.849-0.707-0.849 c1.415-0.424,3.819,0.99,4.244-1.839c0-0.283-3.254-3.819-3.537-4.385c-0.424-0.99-0.565-2.122-0.565-3.112 c0.99,0.142,2.688,0,3.112,0c1.839,0.283,3.678,1.273,5.517,1.557c-0.142,0.424-0.142,0.565,0.142,0.424 c0.565-0.424,0.849-1.132,1.414-1.273c0.283,0-0.142,0.708,0,0.99c0.425,0.283,0.99,0.142,1.414,0.283 c0.99,0.142,1.98,0.142,2.688,0.566c0.424,0.282,0.565,0.849,0.565,1.272c0,0.142-0.283,0-0.283,0 c-0.282,0.142-0.849,0.425-0.565,0.565c0.142,0.283,0.849-0.282,0.99,0c0.425,0.708,0.282,1.557,0,2.264 c-0.283,0.707-2.263,1.132-1.697,1.839c0.707,0.99,3.395-1.556,3.536-0.283c0.142,0.849-1.414,2.405-0.566,2.688 c0.99,0.425,0.99-1.979,1.98-2.121c0.85-0.142,4.103,2.688,4.81,2.404c0.142,0,2.971-3.253,3.961-1.556 c1.98,3.678-7.921,7.497-2.546,8.063c1.131,0.142,1.98-1.273,3.111-1.273c1.415,0.142-0.142,4.244,2.971,2.122 c0.707-0.425,1.132-3.961,2.404-4.668c1.839-0.99,3.819-1.414,4.668,0.566c-0.141-0.425-0.283-1.132-0.141-1.273 c0.848-0.99,1.979-1.415,2.688-2.264c0.848-0.99,0.99-2.546,1.838-3.536c0.283-0.282,2.122,0.425,3.819,0.99 c0.708-0.142,1.415-0.283,1.698-0.283c0.99,0,0.424,1.98,0.99,2.829c0.424,0.566,1.414,0.283,1.838,0.849 c0.85,0.708,1.273,2.688,2.547,2.547c0.99,0,2.121-0.708,3.253-0.425c0.425,0.142-0.565,0.849-0.565,1.273 c0.141,1.132,0.565,2.263,0.99,3.395c0.424,1.132,1.838,1.556,2.971,1.98C318.6,396.925,319.167,397.065,319.59,396.925z M306.719,386.032c0.282-1.272-0.283-2.828,0.141-4.102c0.425-1.273,4.668,2.404,3.819,1.132c-0.565-0.849-2.404-0.425-2.829-1.415 c-0.142-0.849,1.132-1.556,1.697-2.263c0.566-0.425-0.424,1.697,0.142,1.839c0.99,0.282,1.98-0.142,2.829,0.142 c0.849,0.282-1.132,1.414-0.849,2.263c0.283,0.99,1.556,1.132,1.98,2.122c0.282,0.282-1.556,1.697-3.819,2.263 C308.699,388.438,307.708,386.74,306.719,386.032z"/>
最終的には;
<rect x="100" y="55" rx="20" ry="20" width="175" height="120"
style="fill:none;stroke:black;stroke-width:2;opacity:0.5"/>
<text id="myLegCantName" x="160" y="80" font-size="16" font-family="'DejaVuSansCondensed-Bold'" fill="#646464">
</text>
<text id="gdp" x="110" y="100" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<text id="unem" x="110" y="120" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<text id="sp" x="110" y="140" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<text id="pd" x="110" y="160" font-size="14" font-family="'DejaVuSansCondensed-Bold'" fill="#646464" >
</text>
<path id="boximage" x="78" y="100" />
私の問題は、これまでスクリプトとはまったく関係がないことです。助けてください。