• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

Mouse over text

Hello,

Is there a possibility when you want to create a mouseover text of a regular text (by using <span title=""> for example) to format the mouseover text.

Example by mouse over of the text "Register" the following text should appear:

                          * Click on this button
                          * Fill in the form
                          * Click Submit

Thanks in advance
0
bvdm23
Asked:
bvdm23
1 Solution
 
seanpowellCommented:
Somethng like this should work for you (IE and Netscape):
<html>
<head>
<script>
function showtip(current,e,text)
{
   if (document.all)
   {
      thetitle=text.split('<br>')
      if (thetitle.length > 1)
      {
        thetitles=""
        for (i=0; i<thetitle.length; i++)
           thetitles += thetitle[i] + "\r\n"
        current.title = thetitles
      }
      else current.title = text
   }

   else if (document.layers)
   {
       document.tooltip.document.write(
           '<layer bgColor="#FFFFE7" style="border:1px ' +
           'solid black; font-size:12px;color:#000000;">' + text + '</layer>')
       document.tooltip.document.close()
       document.tooltip.left=e.pageX+5
       document.tooltip.top=e.pageY+5
       document.tooltip.visibility="show"
   }
}

function hidetip()
{
    if (document.layers)
        document.tooltip.visibility="hidden"
}
</script>
</head>
<body>
<div id=tooltip style="position:absolute;visibility:hidden"></div>
<A href="#" onmouseover="showtip(this,event,'* Click on this button<br>* Fill in the form<br>* Click Submit')" onmouseout="hidetip()">Register</a>
</body>
</html>
0
 
RichardAllsebrookCommented:
If you want to do something clever with your mouse overs, i can heartily recommend overLIB ( http://www.bosrup.com/web/overlib/ )

It does everthing you need and loads more.
0
 
lbyiCommented:
hi bvdm23

give this a try

<span title="* Click on this button
* Fill in the form
* Click Submit">Register
</span>

works in explorer only - carriage return creates the newline

cheers
0
 
VincentPugliaCommented:
Hi,

And yet another tested version:

<html>
<head>
<script>

var txtArray = new Array();
 txtArray[0] = "<ul><ol>* Click on this button</ol><ol>* Fill in the form</ol><ol>* Click Submit</ol></ul>"
 txtArray[1] = "<ul><ol>* Click on this button</ol><ol>* Jump up and down twice</ol><ol>* Go home and wait</ol></ul>"


function doit(showDiv, divID, txtNdx)
{

var txt = txtArray[txtNdx];

var  divObj = (document.layers) ? document.layers[divID] : (document.all) ? document.all[divID] : document.getElementById(divID);

if (document.layers)
{
  divObj.document.open();
  divObj.document.write(txt);
  divObj.document.close();
}
else
{
  divObj.innerHTML = txt;
}
var divStyle =  (document.layers) ? divObj : divObj.style;

divStyle.visibility = (showDiv) ? 'visible' : 'hidden';
}
</script>
</head>
<body>
<div id="theDiv" style="position:absolute;visibility:hidden"></div>
<A href="#" onmouseover="doit(1, 'theDiv',0)" onmouseout="doit(0, 'theDiv',0)">Register</a><br />
<A href="#" onmouseover="doit(1, 'theDiv',1)" onmouseout="doit(0, 'theDiv',1)">Unregister</a>
</body>
</html>

Vinny
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now