JavaScript zeigen/verbergen Grenzen/Linien

Ich habe eine interaktive Karte erstellt, die, wenn Bereiche ausgewählt sind, dann den zugehörigen Inhalt zeigen/verbergen sollte, was korrekt funktioniert.JavaScript zeigen/verbergen Grenzen/Linien

link to preview

Das Problem, das ich habe, ist eigentlich Spur Linien aus den Bereichen/Punkten zu den dazugehörigen Inhalt Box anschließen.

screenshot

Wie würde ich mich über dieses mit dem JavaScript, dass ich bereits:

<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 &#013;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 &amp; Social Cohesion</td> 
     </tr> 
    <tr> 
     <td><p><strong>Research Chairs:</strong></p></td> 
     <td> <p>Poverty and Inequality</p></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>Land Reform and Democracy</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>Urban Policy</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>Economic Growth, Poverty and Inequality</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</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>

Quelle

2015-12-14 Dale

Die schnelle erstellen schmutziger Weg, diese Linien auf deiner Karte zu platzieren, wäre zu benutzen Bilder (Svg/GIF mit transparentem Hintergrund) und verwenden Sie die 'position: relative;', um sie wie für die Tabellen umschalten – 321zeno

worüber: http://stackoverflow.com/questions/20752723/draw-line-from-html- element-id-zu-einem-anderen-html-element-with-jquery-and-canvas oder http://stackoverflow.com/questions/29549845/animating-a-line-drawn-between-2-elements-without-canvas- linking-by-ids – caramba

Danke, ich würde das machen, aber ich denke, dass es am Frontend und auch am Code etwas zu chaotisch sein könnte. Gibt es eine sauberere Möglichkeit, dies mit JavaScript zu lösen? Ich dachte an die Grenzen der Verwendung von Grenzen, die zeigen/verbergen. Entschuldigung, wenn meine Erklärung etwas verwirrend ist. – Dale

Sie alle Pop-up wie

<!-- 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;"> 
<div style="height: 1px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; top: 30px; left: -70px; width: 70px;"></div> 
<div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; left: -70px; width: 1px; top: -20px; height: 51px;"></div> 
    <table width="100%"> 
    <tr> 
     <td><h3>University of Kwazulu-Natal</h3></td> 
     </tr> 
    <tr> 
     <td><strong>Theme:</strong> Economic Developments</td> 
     </tr> 
    </table> 
</div>

Quelle

2015-12-14 12:03:54

JavaScript zeigen/verbergen Grenzen/Linien

Antwort

Verwandte Themen