?
Solved

Kontext-Help for Text

Posted on 1998-12-30
5
Medium Priority
?
171 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 40 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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 …

770 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