Full version: jsB@nk » Link » Tooltip » Text over a background image
URL: https://www.javascriptbank.com/info-on-link.html
The code will display a message over background image when visitors move mouse on the link.
Full version: jsB@nk » Link » Tooltip » Text over a background image
URL: https://www.javascriptbank.com/info-on-link.html
<style type="text/css">/* Some styles imported to protect incapable browsers */@import "style/bg.css";body { font: 12px/1.3 verdana, arial, helvetica, sans-serif; }h1 { font-size:16px }a:link { color:#33c }a:visited { color:#339 } div.info { font-size:11px; padding:14px }</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">function changeContent(id,shtml) { if (document.getElementById || document.all) { var el = document.getElementById? document.getElementById(id): document.all[id]; var cntnt = '<div class="info">' + shtml + '</div>'; if (el && typeof el.innerHTML != "undefined") el.innerHTML = cntnt; }}var msgOrig = 'Hover over the links to see changing content displayed here.';var msgDflt = ""; // To display an optional message onmouseout var msgBrow = "This code works for browsers that support the innerHTML property, which is most currently used browsers.";var msgCSS = "The div's position is set using the right property in this example. Some browsers may not recognize this setting.";</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="changeContent('writeDiv', msgOrig)"><div id="main"> <p>The screen on the right is the background image of a positioned div. One <a href="javascript://" onmouseover="changeContent('writeDiv', msgBrow)" onmouseout="changeContent('writeDiv',msgDflt)">simple function</a> displays changing text over that image. The image doesn't need to be <a href="javascript:;" onmouseover="changeContent('writeDiv', msgCSS)" onmouseout="changeContent('writeDiv',msgDflt)">positioned</a>, or even in a div for this to work however.</p></div><div id="writeDiv"><div class="info"></div></div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->