Solved

Kontext-Help for Text

Posted on 1998-12-30
5
148 Views
Last Modified: 2011-10-03
I want that a little box with a special text will be opened when I move the mouse over a simple Text (not a formula field or hypertext-link).
This should be the same effect like moving the mouse over a graphic (Alt-Tag).
I would like to run this system on the Internet Explorer 4.0 from Microsoft.
0
Comment
Question by:Meiki
  • 3
5 Comments
 
LVL 19

Expert Comment

by:cheekycj
ID: 1841102
This code will work in both IE4 and NS4: (from www.insidedhtml.com)
______________________________________________________
<HTML>
<HEAD>
<TITLE>Tooltips</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
 NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
 window.name = "main"
// -->
</SCRIPT>


<SCRIPT language="javascript">
  <!--
  /*  Your are permitted to reuse this code as long as the following copyright
      notice is not removed:

      This HTML tip handling is copyright 1998 by insideDHTML.com, LLC. More information about this
      code can be found at Inside Dynamic HTML: HTTP://www.insideDHTML.com
  */


  // Support for all collection
  var allSupport = document.all!=null

  function setupEventObject(e) {
    // Map NS event object to IEs
    if (e==null) return // IE returns
    window.event = e
    window.event.fromElement = e.target
    window.event.toElement = e.target
    window.event.srcElement = e.target
    window.event.x = e.x
    window.event.y = e.y
    // Route the event to the original element
    // Necessary to make sure _tip is set.
    window.event.srcElement.handleEvent(e);
  }


  function checkName(src) {
    // Look for tooltip in IE
    while ((src!=null) && (src._tip==null))
      src = src.parentElement
    return src
  }

  function getElement(elName) {
    // Get an element from its ID
    if (allSupport)
      return document.all[elName]
    else
      return document.layers[elName]
  }

  function writeContents(el, tip) {
    // Replace the contents of the tooltip
    if (allSupport)
      el.innerHTML = tip
    else {
      // In NS, insert a table to work around
      // stylesheet rendering bug.
      // NS fails to apply style sheets when writing
      // contents into a positioned element.
      el.document.open()
      el.document.write("<TABLE WIDTH=200 BORDER=1 bordercolor=black><TR><TD WIDTH=100% BGCOLOR=lightgrey>")
      el.document.write(tip)
      el.document.write("</TD></TR></TABLE>")
      el.document.close()
    }
  }

  function getOffset(el, which) {
    // Function for IE to calculate position
    // of an element.
    var amount = el["offset"+which]
    if (which=="Top")
      amount+=el.offsetHeight
    el = el.offsetParent
    while (el!=null) {
      amount+=el["offset"+which]
      el = el.offsetParent
    }
    return amount
  }
 

  function setPosition(el) {
    // Set the position of an element
    src = window.event.srcElement
    if (allSupport) {
      el.style.pixelTop = getOffset(src, "Top")
      el.style.pixelLeft = getOffset(src, "Left")
    } else
    {
      el.top = src.y + 20 //window.event.y + 15
      el.left = src.x + 75 //window.event.x
    }
  }
     
  function setVisibility(el, bDisplay) {
    // Hide or show to tip
    if (bDisplay)
      if (allSupport)
        el.style.visibility = "visible"
      else
        el.visibility = "show";
    else
      if (allSupport)
        el.style.visibility = "hidden"
      else
        el.visibility = "hidden"
  }


  function displayContents(tip) {
    // Display the tooltip.
    var el = getElement("tipBox")
    writeContents(el, tip)
    setPosition(el)
    setVisibility(el, true)
  }


  function doMouseOver(e) {
    // Mouse moves over an element
    setupEventObject(e)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if  (!el._display) {
        displayContents(el._tip)
        el._display = true
      }
  }

  function doMouseOut(e) {
    // Mouse leaves an element
    setupEventObject(e)
    el = checkName(window.event.srcElement)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if (el._display)
        if ((el.contains==null) || (!el.contains(window.event.toElement))) {
          setVisibility(getElement("tipBox"), false)
          el._display = false
        }
  }

  function doLoad() {
    // Do Loading
    if ((window.document.captureEvents==null) && (!allSupport))
      return // Not IE4 or NS4
    if (window.document.captureEvents!=null)  // NS - capture events
      window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
    window.document.onmouseover = doMouseOver;
    window.document.onmouseout = doMouseOut;
  }

  window.onload = doLoad
  // -->
</SCRIPT>
<STYLE>
  <!--
  #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey; visibility: hidden}
  -->
</STYLE>


</HEAD>
<BODY BGCOLOR=white>
<DIV ID=tipBox>
</DIV>


<P>Here is a demonstration of tooltips:<BR>
<A HREF="javascript:void(0);" onMouseOver="this._tip='What can you do with<FONT COLOR=red><B>DHTML</B></FONT>';return true;">DHTML</A><br>
<A HREF="javascript:void(0);" onMouseOver="this._tip='Second test'">example</A>


</BODY>
</HTML>

___________________________________________

To change where the tooltip showsup change setPosition function (x,y values there)
To change color of what shows up and other visual things change:
writeContent function (table color,border,etc)
and make the similar changes in the below line:
#tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey; visibility: hidden}

This should help you.

Happy New Year,
CJ

0
 

Author Comment

by:Meiki
ID: 1841103
Very Very good
Thank you very much...
0
 
LVL 4

Expert Comment

by:martinag
ID: 1841104
I you like cheekycj's solution you should accept his answer.

Martin
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 1841105
Is there a reason why you rejected my answer?  It does work.

CJ
0
 
LVL 19

Accepted Solution

by:
cheekycj earned 10 total points
ID: 1841106
Posting my answer again...  (in case you rejected it by accident)

This code will work in both IE4 and NS4: (from www.insidedhtml.com)
      ______________________________________________________
      <HTML>
      <HEAD>
      <TITLE>Tooltips</TITLE>

      <SCRIPT LANGUAGE="JavaScript">
      <!--
       NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
       window.name = "main"
      // -->
      </SCRIPT>


      <SCRIPT language="javascript">
        <!--
        /*  Your are permitted to reuse this code as long as the following copyright
            notice is not removed:

            This HTML tip handling is copyright 1998 by insideDHTML.com, LLC. More information about this
            code can be found at Inside Dynamic HTML: HTTP://www.insideDHTML.com
        */


        // Support for all collection
        var allSupport = document.all!=null

        function setupEventObject(e) {
          // Map NS event object to IEs
          if (e==null) return // IE returns
          window.event = e
          window.event.fromElement = e.target
          window.event.toElement = e.target
          window.event.srcElement = e.target
          window.event.x = e.x
          window.event.y = e.y
          // Route the event to the original element
          // Necessary to make sure _tip is set.
          window.event.srcElement.handleEvent(e);
        }


        function checkName(src) {
          // Look for tooltip in IE
          while ((src!=null) && (src._tip==null))
            src = src.parentElement
          return src
        }

        function getElement(elName) {
          // Get an element from its ID
          if (allSupport)
            return document.all[elName]
          else
            return document.layers[elName]
        }

        function writeContents(el, tip) {
          // Replace the contents of the tooltip
          if (allSupport)
            el.innerHTML = tip
          else {
            // In NS, insert a table to work around
            // stylesheet rendering bug.
            // NS fails to apply style sheets when writing
            // contents into a positioned element.
            el.document.open()
            el.document.write("<TABLE WIDTH=200 BORDER=1 bordercolor=black><TR><TD
      WIDTH=100% BGCOLOR=lightgrey>")
            el.document.write(tip)
            el.document.write("</TD></TR></TABLE>")
            el.document.close()
          }
        }

        function getOffset(el, which) {
          // Function for IE to calculate position
          // of an element.
          var amount = el["offset"+which]
          if (which=="Top")
            amount+=el.offsetHeight
          el = el.offsetParent
          while (el!=null) {
            amount+=el["offset"+which]
            el = el.offsetParent
          }
          return amount
        }
         

        function setPosition(el) {
          // Set the position of an element
          src = window.event.srcElement
          if (allSupport) {
            el.style.pixelTop = getOffset(src, "Top")
            el.style.pixelLeft = getOffset(src, "Left")
          } else
          {
            el.top = src.y + 20 //window.event.y + 15
            el.left = src.x + 75 //window.event.x
          }
        }
             
        function setVisibility(el, bDisplay) {
          // Hide or show to tip
          if (bDisplay)
            if (allSupport)
              el.style.visibility = "visible"
            else
              el.visibility = "show";
          else
            if (allSupport)
              el.style.visibility = "hidden"
            else
              el.visibility = "hidden"
        }


        function displayContents(tip) {
          // Display the tooltip.
          var el = getElement("tipBox")
          writeContents(el, tip)
          setPosition(el)
          setVisibility(el, true)
        }


        function doMouseOver(e) {
          // Mouse moves over an element
          setupEventObject(e)
          var el, tip
          if ((el = checkName(window.event.srcElement))!=null)
            if  (!el._display) {
              displayContents(el._tip)
              el._display = true
            }
        }

        function doMouseOut(e) {
          // Mouse leaves an element
          setupEventObject(e)
          el = checkName(window.event.srcElement)
          var el, tip
          if ((el = checkName(window.event.srcElement))!=null)
            if (el._display)
              if ((el.contains==null) || (!el.contains(window.event.toElement))) {
                setVisibility(getElement("tipBox"), false)
                el._display = false
              }
        }

        function doLoad() {
          // Do Loading
          if ((window.document.captureEvents==null) && (!allSupport))
            return // Not IE4 or NS4
          if (window.document.captureEvents!=null)  // NS - capture events
            window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
          window.document.onmouseover = doMouseOver;
          window.document.onmouseout = doMouseOut;
        }

        window.onload = doLoad
        // -->
      </SCRIPT>
      <STYLE>
        <!--
        #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey;
      visibility: hidden}
        -->
      </STYLE>


      </HEAD>
      <BODY BGCOLOR=white>
      <DIV ID=tipBox>
      </DIV>


      <P>Here is a demonstration of tooltips:<BR>
      <A HREF="javascript:void(0);" onMouseOver="this._tip='What can you do with<FONT
      COLOR=red><B>DHTML</B></FONT>';return true;">DHTML</A><br>
      <A HREF="javascript:void(0);" onMouseOver="this._tip='Second test'">example</A>


      </BODY>
      </HTML>

      ___________________________________________

      To change where the tooltip showsup change setPosition function (x,y values there)
      To change color of what shows up and other visual things change:
      writeContent function (table color,border,etc)
      and make the similar changes in the below line:
      #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey;
      visibility: hidden}

      This should help you.

      Happy New Year,
      CJ
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now