Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích cho liên kết
URL: https://www.javascriptbank.com/popup-link-onclick.html
Đoạn mã tạo hiển thị khung chú thích ngay bên dưới khi người dùng nhấp vào liên kết. Khung này được trang trí bằng CSS nên trông khá bắt mắt.
Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích cho liên kết
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-->