Solved

Kontext-Help for Text

Posted on 1998-12-30
5
166 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

691 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