little window on mouse over

@LeruraNov 07.2005 — #it's the title-attribute that does that.

try this.[CODE]<span title="description">word</span>[/CODE]

@BaptistKittyauthorNov 07.2005 — #hmmm... that might work but its not quite it...

the one I had seen was a little more complex looking... it was a script and sometimes would have a picture and text and such show up on mouseover

@AncoraNov 07.2005 — #It it commonly called a "tooltip."

[CODE]<html>
 <head>
 <script type="text/javascript">
 
 var midScreen = screen.width/2; 
 var tipContainer1 = "";
 
 function stayHome(m){ 
 
 if (document.all)
 {
 var currX = event.clientX;
 var currY = event.clientY;
 }
 else	{
 var currX = m.pageX;
 var currY = m.pageY;
 }
 if (!document.body.scrollTop)
 {
 var iL = document.documentElement.scrollLeft; 
 var iV = document.documentElement.scrollTop;
 }
 else 	{
 var iL = document.body.scrollLeft; 
 var iV = document.body.scrollTop; 
 }
 if (currX > midScreen-30)
 {
 var msgWidth = tipContainer1.clientWidth;
 if (document.all){tipContainer1.style.left = (currX-msgWidth-10+iL)+'px'}
 else {tipContainer1.style.left = (currX-msgWidth-10)+'px'}
 }
 else	{
 if (document.all){tipContainer1.style.left = (currX+10+iL)+'px'}
 else {tipContainer1.style.left = (currX+10)+'px'}
 }
 if (document.all){tipContainer1.style.top = (currY+iV)+'px'}
 else {tipContainer1.style.top = currY+'px'}
 }
 
 document.onmousemove = stayHome;
 
 function insertFloatMsg(){
 
 styleStr = "<style>.msgFloat {Position:Absolute;Top:0;Left:0;Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:3px;Padding-Bottom:3px;Font-family:Tahoma;Font-Size:13pt;Line-Height:102%;}</Style>";
 divStr = "<div class='msgFloat' id='isFloat1'>&nbsp</div>"
 document.write(styleStr);
 document.write(divStr);
 tipContainer1 = document.getElementById('isFloat1');
 }
 
 function hideMessage(){
 
 tipContainer1.style.display = 'none';
 while (tipContainer1.lastChild)
 {tipContainer1.removeChild(tipContainer1.lastChild)}
 }
 
 function showMessage(toolTip,currItem){
 
 var tipTxt = toolTip.split("|");
 tipContainer1.style.display = 'inline';
 for (i=0; i<tipTxt.length; i++)
 {
 tipContainer1.appendChild(document.createTextNode(tipTxt[i]))
 tipContainer1.appendChild(document.createElement('br'))
 }
 currItem.onmouseout=hideMessage;
 }
 
 function initToolTip(){
 
 insertFloatMsg();
 hideMessage();
 if (!document.all){document.captureEvents(Event.mousemove)}
 }
 
 </script>
 </head>
 <body>
 <center>
 <span onmouseover="showMessage('This is a message for the first link',this)" style='cursor:default'>This is some text</span>
 <br><br>
 <span onmouseover="showMessage('This is a message|for the second link|consisting of 3 lines',this)" style='cursor:default'>This is some more text</span>
 </center>
 <!-- Keep the following line immediately preceding the closing Body tag -->
 <script type="text/javascript"> initToolTip() </Script>
 </body>
 </html>[/CODE]

@BaptistKittyauthorNov 07.2005 — #yeah, thats it... thanks!!!

@slimjimJun 24.2006 — #How would you use that but also add different images plus text.

So if i had a table with links that are taken from database and each link would have a different image in tooltip and the image name comes from the database also ?

little window on mouse over

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

little window on mouse over

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴