Hyperlinks Collection

All kinds of ways to link with notes

by David McClelland

HTML

<h3>Collection of linking methods and notes about them</h3>

<table ">
    <tr>
        <th width="100px">link example</th>
        <th>notes</th>
    </tr>
    <tr>
        <td><a href="http://google.com">Standard HTML Link</a></td>
        <td>Open in new tab in context menu</td>
    </tr>
    <tr>
        <td><script>
            var theString = "JavaScript Link";
            var theLink = theString.link("http://google.com");
            document.write(theLink);</script></td>
        <td>Javascript Link() document write</td>
    </tr>
    <tr>
        <!--"     -->
        <td><a href="http://google.com" onclick="var e = arguments[0]; e.preventDefault();alert('Hey!');top.document.location='http://yahoo.com';">Inline onclick</a></td>
        <td>Displays the Open in new Tab right-click menu option but when selected, follows anchor URL, not onclick.</td>
    </tr>
    <tr>
        <td>
            <a href="http://google.com" title="mock link" id="theLink" name="theLinkName">Google.com</a></td>
        <td>onclick event assigned by JavaScript: Right-click opens Google, Left-click opens Yahoo.</td>
    </tr>
    <tr>
        <td>
            <div id="showHideMenu">
                <a href="http://google.com"><div id="SubMenuItem_0" class="SubMenuItem" style="float: none; position: static;">link inside div</div></a></div>
        </td><td>IE9 does not show Open in New Tab with this</td></tr>
    
    
    
    <!-- most promising example -->
<tr><td>
                <a href="http://google.com"><span id="SubMenuItem_0" class="SubMenuItem" style="float: none; position: static;">link inside span</span></a>
        </td><td>IE9 <b>does</b> show Open in New Tab with span inside a href as long as the span does not have display:block, position:absolute, clear:both and is not in a table 
 </td></tr>
<!-- most promising example -->
    
    
    
<!-- most promising example -->
<tr><td>
    <span id="showHideMenu" style="display:block;">
                <a...

CSS

body{
        font-family:calibri;
}
}h3 {
    font-weight:bold;
}
th {
    text-align:left;
    background-color:#b9c9fe;
}
td
{
background-color:#e8edff;
color:#666699;
}
table{
    border:1px solid #999;
    /*border-collapse:collapse;*/
    border-bottom: 1px solid #999;
    width:600px;
}
}

JavaScript

var el = document.getElementById("theLink");
        el.addEventListener("click",openLink, true);

        function openLink(event){
            event.preventDefault();
            alert("open yahoo.com ");
            top.location.href="http://www.yahoo.com";
            // prevent following href

            //return false;
        };

function ToggleSubMenu(e, id) {
    e.stopPropagation();
    if (document.getElementById(id).style.display == 'none') {
        HidePops();
        pops[pops.length] = $("#" + id);
        $("#" + id).fadeIn();
    }
    else {
        $("#" + id).fadeOut();
    }
}

function HidePops() {
    isReordering = false;
    if (!isSearching) {
        for (var i = 0; i < pops.length; i++) {
            pops[i].fadeOut();
        }
        pops = new Array();
    }
}