[ CSS ]
#title2note{
position: fixed;
z-index: 2;
bottom: 0;
right: 0;
width: 20em;
margin: 1em;
padding: 7px 5px 7px 10px;
font: 12px/1.2em "Lucida Console", "Courier New", monospace;
text-align: left;
color: #111;
background-color: #FFFFB4;
border: 1px solid #111;
}
/* star html hack - IE only */
* html #title2note{
position: absolute;
}
/* a bet on future IEs */
#title2note[id]{
position: fixed;
}
[ JS ]
var titleToNote = {
// Define which elements should be affected:
elements : ['a', 'img'],
setup : function(){
if(!document.getElementById || !document.createElement) return;
// create note
var div = document.createElement("div");
div.setAttribute("id", "title2note");
document.getElementsByTagName("body")[0].appendChild(div);
document.getElementById("title2note").style.display = "none";
// attach events
for(j=0;j<titleToNote.elements.length;j++){
for(i=0;i<document.getElementsByTagName(titleToNote.elements[j]).length;i++){
var el = document.getElementsByTagName(titleToNote.elements[j])[i];
if(el.getAttribute("title") && el.getAttribute("title") != ""){
el.onmouseover = titleToNote.showNote;
el.onmouseout = titleToNote.hideNote;
}
}
}
},
showNote : function()
{
document.getElementById("title2note").innerHTML = this.getAttribute("title");
this.setAttribute("title", "");
document.getElementById("title2note").style.display = "block";
},
hideNote : function()
{
this.setAttribute("title", document.getElementById("title2note").innerHTML);
document.getElementById("title2note").innerHTML = "";
document.getElementById("title2note").style.display = "none";
}
}
/* End Title To Note */
//Onload Handling
var oldonload=window.onload;if(typeof window.onload!='function'){
window.onload=titleToNote.setup;
}else{window.onload=function(){oldonload();
titleToNote.setup();}}
/* setup faster by deleting these lines and adding
<script type="text/javascript">titleToNote.setup();</script>
before the closing body tag in your HTML */
[ HTML ]
<html>
<head>
<title>Title to note</title>
<script type="text/javascript" src="js/title2note.js"></script>
<style type="text/css" media="screen">
@import "css/title2note.css";
/* DEMO CSS */
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.9em;
line-height:130%;
text-align:center;
background-color: #E2EBED;
margin:0px;
}
#mainContainer{
width:760px;
text-align:left;
background-color:#FFF;
padding:10px;
}
img{
border:0px;
}
a{
color:#F00;
}
</style>
</head>
<body>
<div id="mainContainer">
<img src="/images/heading3.gif">
<h1>Title To Note</h1>
<p>This nice script uses the standard title attribute to show a message in the bottom right corner of the browser instead of the standard browser tooltip.</p>
<h2>Example:</h2>
<pre><a href="#" title="bääh">TestLink</a></pre>
<p>becomes <strong><a href="#" title="bääh">TestLink</a></strong> <em><- Hover this and look on the bottom right.</em></p>
<h2>Examples</h2>
<p><img src="images/demo_image1.jpg" alt="TestImage" title="This picture is from an island at the west coast of Norway"> <em><- Hover this image.</em><br><br></p>
<p><strong><a href="#" title="This is just a link">TestLink</a></strong> <em><- Hover this link.</em><br><br></p>
<p><em>Should work in browsers with support for DOM and position:fixed and also in IE 5+.</em></p>
<p>Tested in: Firefox, IE5+, Opera7</p>
</div>
</body>
</html>
|
