6
我創建了一個交互式地圖，當選擇區域時，相關內容應該顯示/隱藏，這是正常工作。JavaScript顯示/隱藏邊框/線條
我有實際上是從區/點連接蹤跡線的相關內容框的問題。
我怎麼會去這個使用JavaScript，我已經有了：
<style>
/* Fonts */
@font-face {
font-family: 'Newbaskn';
src: url('fonts/Newbaskn.eot');
src: url('fonts/Newbaskn.eot') format('embedded-opentype'),
url('fonts/Newbaskn.woff2') format('woff2'),
url('fonts/Newbaskn.woff') format('woff'),
url('fonts/Newbaskn.ttf') format('truetype'),
url('fonts/Newbaskn.svg#Newbaskn') format('svg');
}
@font-face {
font-family: 'OpenSansLight';
src: url('fonts/OpenSansLight.eot');
src: url('fonts/OpenSansLight.eot') format('embedded-opentype'),
url('fonts/OpenSansLight.woff2') format('woff2'),
url('fonts/OpenSansLight.woff') format('woff'),
url('fonts/OpenSansLight.ttf') format('truetype'),
url('fonts/OpenSansLight.svg#OpenSansLight') format('svg');
}
.map h3{font-family: 'Newbaskn';text-transform:uppercase;color:#b3772c;font-size:13px;font-weight:normal;line-height:0px;}
.map table{font-family: 'OpenSansLight';font-size:13px;font-weight:normal;padding: 15px;}
p{text-align:left;font-family: 'OpenSansLight';}
</style>
<div class="map" align="center">
<img src="mandela-map.jpg" alt="map" width="500" height="431" border="0">
<button title="University of Cape Town 
University of Western Cape" name="uct-btn" id="uct-btn" style=" cursor:pointer; position: relative; left: -420px; top: -35px; border: none; background:#000;border-radius: 15px;width: 1%;height: 2%;">o</button>
<button title="University of Stellenbosch" name="stell-btn" id="stell-btn" style="cursor: pointer; position: relative; left: -430px; top: -23px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="Nelson Mandela Metropolitan University" name="nelson-btn" id="nelson-btn" style="cursor: pointer; position: relative; left: -295px; top: -40px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="Rhodes University" name="rhodes-btn" id="rhodes-btn" style="cursor: pointer; position: relative; left: -280px;top: -45px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="University of Free State" name="free-btn" id="free-btn" style="cursor: pointer; position: relative; left: -292px;top: -189px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="University of Kwazulu-Natal" name="kzn-btn" id="kzn-btn" style="cursor: pointer; position: relative; left: -200px;top: -162px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<button title="University of the Witwatersrand" name="wit-btn" id="wit-btn" style="cursor: pointer; position: relative; left: -280px;top: -288px; border: none; background: #000; border-radius: 15px; width: 1%; height: 2%;">o</button>
<!-- University of Cape Town -->
<div id="uct-content" style="display:none;border: #000 1px solid; background: transparent; width: 407px; height: auto; position: relative; left: -500px; top: -375px;">
<table width="100%">
<tr>
<td colspan="2"><h3>University of Cape Town</h3></td>
</tr>
<tr>
<td colspan="2"><strong>Theme:</strong> Youth & Social Cohesion</td>
</tr>
<tr>
<td><p><strong>Research Chairs:</strong></p></td>
<td> <p>Poverty and Inequality</p></td>
</tr>
<tr>
<td> </td>
<td>Land Reform and Democracy</td>
</tr>
<tr>
<td> </td>
<td>Urban Policy</td>
</tr>
<tr>
<td> </td>
<td>Economic Growth, Poverty and Inequality</td>
</tr>
<tr>
<td> </td>
<td><p> Health and Wealth</p></td>
</tr>
</table>
</div>
<!-- University of Western Cape -->
<div id="uwc-content" style="display:none;border: #000 1px solid; background: transparent; width: 344px;height: auto;position: relative;left: -533px; top: -355px;">
<table width="100%">
<tr>
<td><h3>University of Western Cape</h3></td>
</tr>
<tr>
<td><strong>Research Chair:</strong> Poverty, Land and Agrarian Studies</td>
</tr>
</table>
</div>
<!-- University of Stellenbosch -->
<div id="stell-content" style="display:none;border: #000 1px solid; background: #fff; width: 340px;height: auto;position: relative;left: -534px; top: -150px;">
<table width="100%">
<tr>
<td><h3>University of Stellenbosch</h3></td>
</tr>
<tr>
<td><strong>Research Chair</strong>: Economics of Social Policy</td>
</tr>
</table>
</div>
<!-- Nelson Mandela Metropolitan University -->
<div id="nelson-content" style="display:none;border: #000 1px solid; background: #fff; width: 407px; height: auto; position: relative; left: -500px; top: -100px;">
<table width="100%">
<tr>
<td><h3>Nelson mandela metropolitan University</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Education</td>
</tr>
</table>
</div>
<!-- Rhodes University -->
<div id="rhodes-content" style="display:none;border: #000 1px solid; background: #fff;width: 189px;height: auto;position: relative;left: 64px;top: 0px;">
<table width="100%">
<tr>
<td><h3>Rhodes University</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Education</td>
</tr>
</table>
</div>
<!-- University of Free State -->
<div id="free-content" style="display:none;border: #000 1px solid; background: #fff;width: 236px;height: auto;position: relative;left: 191px;top: -78px;">
<table width="100%">
<tr>
<td><h3>University of Free State</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Social Cohesion</td>
</tr>
</table>
</div>
<!-- University of Kwazulu-Natal -->
<div id="kzn-content" style="display:none;border: #000 1px solid; background: #fff;width: 297px;height: auto;position: relative;left: 317px;top: -151px;">
<table width="100%">
<tr>
<td><h3>University of Kwazulu-Natal</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Economic Developments</td>
</tr>
</table>
</div>
<!-- University of the Witwatersrand -->
<div id="wit-content" style="display:none;border: #000 1px solid; background: #fff;width: 372px;height: auto;position: relative;left: 377px;top: -253px;">
<table width="100%">
<tr>
<td><h3>University of the Witwatersrand</h3></td>
</tr>
<tr>
<td><strong>Theme:</strong> Inequality</td>
</tr>
<tr>
<td><strong>Research Chairs:</strong> Development Planning and Modeling
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#uct-btn").click(function(){
$("#uct-content").fadeToggle(500);
$("#uwc-content").fadeToggle(500);
$("#stell-content").hide(0);
$("#nelson-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#stell-btn").click(function(){
$("#stell-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#uwc-content").hide(0);
$("#nelson-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#nelson-btn").click(function(){
$("#nelson-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#rhodes-btn").click(function(){
$("#rhodes-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#free-btn").click(function(){
$("#free-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#kzn-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#kzn-btn").click(function(){
$("#kzn-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#wit-content").hide(0);
});
});
$(document).ready(function(){
$("button#wit-btn").click(function(){
$("#wit-content").fadeToggle(500);
$("#uct-content").hide(0);
$("#nelson-content").hide(0);
$("#stell-content").hide(0);
$("#uwc-content").hide(0);
$("#rhodes-content").hide(0);
$("#free-content").hide(0);
$("#kzn-content").hide(0);
});
});
/*$(document).ready(function(){
$("button#close").click(function(){
$("#uct-content").hide(1000);
});
});*/
</script>
</div>
快速＆骯髒的方式將這些行放在你的地圖上將被使用圖像（透明背景的SVG/GIF），並使用'position：relative;'來切換它們，就像表 – 321zeno
那樣：http://stackoverflow.com/questions/20752723/draw-line-from-html- element-id-to-another-html-element-with-jquery-and-canvas或者http://stackoverflow.com/questions/29549845/animating-a-line-drawn-between-2-elements-without-canvas-通過鏈接標識 – caramba
謝謝，我打算這樣做，但我覺得它可能有點太雜亂的前端以及代碼。有沒有更清晰的方法來解決這個問題？我正在考慮使用顯示/隱藏邊界的方式。道歉，如果我的解釋有點混亂。 – Dale