Full version: jsB@nk » Link » Popup link onClick
URL: https://www.javascriptbank.com/popup-link-onclick.html
This JavaScript will draw a table to descript the JavaScript link when visitors click the specified link.
Full version: jsB@nk » Link » Popup link onClick
URL: https://www.javascriptbank.com/popup-link-onclick.html
<style>BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 86%; BACKGROUND: url(images/bg2.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #333; PADDING-TOP: 0px; FONT-FAMILY: Tahoma, Verdana, sans-serif; min-width: 750px}IMG {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}P {FONT-SIZE: 0.8em; MARGIN: 4px 0px; LINE-HEIGHT: 16px}TABLE {FONT-SIZE: 0.8em}A {BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 15px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none}A:link {BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 15px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none}A:active {BACKGROUND: none transparent scroll repeat 0% 0%; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 15px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none}A:visited {COLOR: #333}A:hover {BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #006; BORDER-BOTTOM: #333 1px solid; TEXT-DECORATION: none}A.header {BORDER-BOTTOM-WIDTH: 0px}A.header:active {BORDER-BOTTOM-WIDTH: 0px}A.header:hover {BORDER-BOTTOM-WIDTH: 0px}DIV#wrap {MARGIN: 0px auto; WIDTH: 750px}#header {MARGIN: 0px; HEIGHT: 97px; BACKGROUND-COLOR: transparent}#nav {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: url(images/nav_bg2.gif); PADDING-BOTTOM: 5px; MARGIN: 0px 0px 20px; PADDING-TOP: 5px; HEIGHT: 45px}#main {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 20px; WIDTH: 500px; PADDING-TOP: 0px}#sidebar {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 20px 515px; WIDTH: 232px; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent}UNKNOWN {WIDTH: 235px}#footer {CLEAR: both; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: url(images/nav_bg2.gif); PADDING-BOTTOM: 5px; PADDING-TOP: 5px}A.vmenu {DISPLAY: block; BACKGROUND: #ddd; WIDTH: 75px; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none}A.vmenu:link {DISPLAY: block; BACKGROUND: #ddd; WIDTH: 75px; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none}A.hmenu {DISPLAY: block; BACKGROUND: #ddd; WIDTH: 75px; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none}A.hmenu:link {DISPLAY: block; BACKGROUND: #ddd; WIDTH: 75px; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none}A.vmenu:visited {DISPLAY: block; BACKGROUND: #ddd; WIDTH: 75px; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none}A.hmenu:visited {DISPLAY: block; BACKGROUND: #ddd; WIDTH: 75px; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; TEXT-DECORATION: none}A.hmenu {FLOAT: left}A.hmenu:link {FLOAT: left}A.hmenu:visited {FLOAT: left}A.hmenu:hover {BACKGROUND: #9492a5; COLOR: #fff}A.vmenu:hover {BACKGROUND: #9492a5; COLOR: #fff}A.hmenu:active {BACKGROUND: #333; COLOR: #fff}A.vmenu:active {BACKGROUND: #333; COLOR: #fff}#nav {HEIGHT: 25px}#header H1 {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #ccc; PADDING-TOP: 5px; FONT-FAMILY: Arial}#main H1 {MARGIN: 0px 0px 3px; FONT-FAMILY: Georgia, Trebuchet MS, serif}#main H2 {MARGIN: 0px 0px 3px; FONT-FAMILY: Georgia, Trebuchet MS, serif}#main H3 {MARGIN: 0px 0px 3px; FONT-FAMILY: Georgia, Trebuchet MS, serif}#main H2 {FONT-SIZE: 1.2em}#main H3 {FONT-SIZE: 1em; COLOR: #333; FONT-FAMILY: Tahoma}.project {BORDER-RIGHT: #f7f3f7 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #f7f3f7 1px solid; PADDING-LEFT: 15px; BACKGROUND: url(images/shadow_main.gif) #fff repeat-y; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 20px; BORDER-LEFT: #f7f3f7 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #f7f3f7 1px solid}.page-content {BORDER-RIGHT: #f7f3f7 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #f7f3f7 1px solid; PADDING-LEFT: 15px; BACKGROUND: url(images/shadow_main.gif) #fff repeat-y; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 20px; BORDER-LEFT: #f7f3f7 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #f7f3f7 1px solid}.project .content IMG.teaser {BORDER-RIGHT: #dedede 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #dedede 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 2px 10px 0px 0px; BORDER-LEFT: #dedede 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #dedede 1px solid}.page-content .content IMG.teaser {BORDER-RIGHT: #dedede 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #dedede 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 2px 10px 0px 0px; BORDER-LEFT: #dedede 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #dedede 1px solid}.page-content .content IMG.gallery {BORDER-RIGHT: #dedede 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #dedede 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 2px 10px 0px 0px; BORDER-LEFT: #dedede 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #dedede 1px solid}.page-content .content IMG.gallery {FLOAT: left}.project .content IMG.teaser {FLOAT: left; WIDTH: 200px; HEIGHT: 150px}.page-content .content IMG.teaser {FLOAT: left; WIDTH: 200px; HEIGHT: 150px}.project .project-separator {CLEAR: left; HEIGHT: 1px}.project .project-menu {BORDER-RIGHT: #dedede 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #dedede 1px solid; PADDING-LEFT: 10px; BACKGROUND: #fafafa; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: #dedede 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #dedede 1px solid}.project .meta {BORDER-RIGHT: #dedede 1px solid; BACKGROUND: #fafafa; MARGIN: 0px; BORDER-LEFT: #dedede 1px solid; BORDER-BOTTOM: #dedede 1px solid}.meta-key {VERTICAL-ALIGN: top}.meta-value {VERTICAL-ALIGN: top}.meta-key {COLOR: #666; TEXT-ALIGN: right}.news-meta P {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.7em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}.navigation {FONT-SIZE: 0.7em}.navigation .alignright {TEXT-ALIGN: right}.navigation .alignleft {TEXT-ALIGN: left}#sidebar .sidebar-box {BORDER-RIGHT: #dedede 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #dedede 1px solid; PADDING-LEFT: 0px; BACKGROUND: url(images/shadow_sidebar.gif) #efefef repeat-y right 50%; PADDING-BOTTOM: 5px; MARGIN: 5px 0px 20px 10px; BORDER-LEFT: #dedede 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #dedede 1px solid}#sidebar .sidebar-title {BACKGROUND: url(images/shadow_sidebar.gif) #e6ebef repeat-y right 50%}#sidebar DIV.news {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px}#sidebar DIV.content {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px}#sidebar DIV.links {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px}#sidebar DIV.content P {MARGIN: 0px}#sidebar DIV.links P {MARGIN: 0px}#sidebar H3 {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 0.9em; PADDING-BOTTOM: 3px; MARGIN: 0px; TEXT-TRANSFORM: uppercase; COLOR: #7789a6; PADDING-TOP: 3px; BORDER-BOTTOM: #dedede 1px solid}#sidebar H2 {FONT-SIZE: 0.8em; MARGIN: 0px; COLOR: #630000}#sidebar H5 {FONT-WEIGHT: normal; FONT-SIZE: 0.85em; MARGIN: 0px}#sidebar UL {MARGIN-BOTTOM: 0px}UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; LIST-STYLE-IMAGE: url(images/list_arrow.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 2px 30px; PADDING-TOP: 0px}.links UL {MARGIN: 0px 10px 0px -10px}#footer P {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px}.separator {BACKGROUND: url(images/separator2.gif); MARGIN: 15px auto; WIDTH: 100px; HEIGHT: 7px}INPUT {MARGIN: 10px 10px 0px}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT type=text/javascript>/* easytoggle2.js - Simon Willison, 5th November 2003 - See http://simon.incutio.com/archive/2003/11/06/easytoggle*/addEvent(window, 'load', et_init);var SHOW_FIRST_ON_LOAD = false; var et_toggleElements = [];/* Initialisation */function et_init() { var i, link, id, target, first; first = SHOW_FIRST_ON_LOAD; for (i = 0; (link = document.links[i]); i++) { if (/\btoggle\b/.exec(link.className)) { id = link.href.split('#')[1]; target = document.getElementById(id); et_toggleElements[et_toggleElements.length] = target; if (first) { first = false; } else { target.style.display = 'none'; } link.onclick = et_toggle; } }}function et_toggle(e) { /* Adapted from http://www.quirksmode.org/js/events_properties.html */ if (typeof e == 'undefined') { var e = window.event; } var source; if (typeof e.target != 'undefined') { source = e.target; } else if (typeof e.srcElement != 'undefined') { source = e.srcElement; } else { return true; } /* For most browsers, targ would now be a link element; Safari however returns a text node so we need to check the node type to make sure */ if (source.nodeType == 3) { source = source.parentNode; } var id = source.href.split('#')[1]; var elem;/* hide all elements but the current one */ /*for (var i = 0; (elem = et_toggleElements[i]); i++) { if (elem.id != id) { elem.style.display = 'none'; } else { elem.style.display = 'block'; } }*/var elem = document.getElementById(id);if (elem.style.display == 'none') {elem.style.display = 'block';} else {elem.style.display = 'none';} return false;}/* Thanks to Scott Andrew */function addEvent(obj, evType, fn){ if (obj.addEventListener) { obj.addEventListener(evType, fn, true); return true; } else if (obj.attachEvent) { var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; }}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id=main><DIV class=project><DIV class=project-menu><P><A class=toggle href="#meta-5">Project Details</A> | <A class=toggle href="#meta-5">Comments</A> | <A class=toggle href="#meta-5">Permalink</A></P></DIV><DIV class=meta id=meta-5><TABLE> <TBODY> <TR> <TD class=meta-key>keywords</TD> <TD class=meta-value>portal, Riot CMS, games, multilingual</TD></TR> <TR> <TD class=meta-key>date</TD> <TD class=meta-value>06/2004</TD></TR> <TR> <TD class=meta-key>link</TD> <TD class=meta-value><A title="Konami of Europe" href="">Konami of Europe</A></TD></TR> <TR> <TD class=meta-key>participants</TD> <TD class=meta-value></TD></TR> <TR> <TD class=meta-key>tasks</TD> <TD class=meta-value>Riot CMS, JSP, site-logic and -templates, DB schema</TD></TR> <TR> <TD class=meta-key>categories</TD> <TD class=meta-value><A title="View all posts in commercial" href="">commercial</A></TD></TR> <TR> <TD class=meta-key>client</TD> <TD class=meta-value>Konami of Europe</TD></TR> <TR> <TD class=meta-key>employer</TD> <TD class=meta-value>neteye GmbH</TD></TR></TBODY></TABLE></DIV></DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->