How to put those mouse over adverts in my forum

Hi folks,
I have seen many forums that have certain keywords underlined. Then when you mouse over them, a little window pops up with some info there. Can anyone tell me how I can do this? I use phpbb on my site and was wondering how I could add this?
Regards,
Kwaoc
LVL 1
kwaocAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sajuksCommented:
Use tooltips, heres an example from 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 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 + 10 //window.event.y + 15
      el.left = src.x + 50 //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='<FONT COLOR=red><B>DHTML</B></FONT>';return true;">DHTML</A><br>
<A HREF="javascript:void(0);" onMouseOver="this._tip='example'">example</A>


</BODY>
</HTML>


0
kwaocAuthor Commented:
I was wanting to use it in a php forum, experts-exchange does it sometimes. I often highlight a word and an advert pops up. Is the above thing what I am looking for?
Thanks,
Kwaoc
0
sajuksCommented:
You could also use the title tag. I believe thats what E_E does.
<a href="#" title="Refresh this page..">Refresh </a>
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

kwaocAuthor Commented:
Hey I dont get it. Sorry!
I have my site at www.memorymentor.com
Click on forum and now how would I get the tool tips to come in there!! I am sorry I do not understand
Kwaoc
0
sajuksCommented:
For ex your question in E-E
     <a href="Q_21220696.html" title="How to put those mouse over adverts in my forum">How to put those mouse over adverts in m...</a>

When generating the pages from PHP remeber to put the title tag
0
kwaocAuthor Commented:
I think I get you... what do I do to the above code to make it work?
0
sajuksCommented:
//try this       <a href="Q_21220696.html" title="Improve my memory">Improve my memory</a>
Now in your page using style sheets and title tage you could incorporate it like this
<html>
<head>
<style type="text/css">
  .a
  {
     color: red;
     text-decoration: underline;
  }
</style>
</head>
<body>
<span class="a" title = "Improve my memory">Improve my memory</span> .I guess that's why you are here right?
</body>
</html>
0
kwaocAuthor Commented:
Sorry, dont understand how I can do it in the forum! php forum!
that looks like html.
Sorry,
Kwaoc
0
sajuksCommented:
It is with html that you are going to do it. In your php page you just need to add those title tags.
Check the source of your page,they are all html tags. Just change the pages to add these title tags.
for eg: display.php
<?php
.... php code
?>
<span class="a" title = "Improve my memory">Improve my memory</span> .I guess that's why you are here right?
<?php
--
?>

0
kwaocAuthor Commented:
Ok, tell me how I can do this.
I have a test secction on my forum.
I want to have a tool tip for the word "hello" and the tooltip will say "how are you"
Can you sshow me the code that I can paste into the forum?
Thanks,
Kwaoc
0
sajuksCommented:
//Check the example i'd posted earlier. Its the same thing. Using the style shhets you can change the look .
<html>
<head>
<style type="text/css">
  .a
  {
     color: blue;
     text-decoration: underline;
  }
</style>
</head>
<body>
<span class="a" title = "how are you ">hello</span> kwaoc
</body>
</html>

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kwaocAuthor Commented:
Hi Sajuks,
To be n=honest I have no idea what your talking about. I know nothing about style sheets etc.
Is there no html code I can place inbetween a word that will produce the tooltip.?


eg
hello and welcom to the <html code "memory" tooltip "memory means to remember something" > website....
Etc.
Kwaoc
0
sajuksCommented:
You could just use
<span title = "how are you "><U>hello</U></span> kwaoc
The class i added cos you wanted highlighted text. Its better to put it in a style sheet so that you dont've to specify the same
formatting in n number of places.
<span title = "how are you "><U>hello</U></span> kwaoc

Cant avoid the span tag also. unless its for links ot data between table cells


Check http://www.netmechanic.com/news/vol6/html_no1.htm for examples on how to use the title tag.



0
kwaocAuthor Commented:
So, using the span thing, it will always show up?
0
sajuksCommented:
If its just plain text that you are writing ( Hi there , this is a welcome ), yes you need the span tags.
The link above shows the other places where you can set the title but that wouldnt be relevant to u in this context.
the span tag is basically to enclose the specific text that you want changed.

0
Marcus BointonCommented:
The title tag showing as a tooltip is a browser-specific thing, so you can't rely on it to act in a particular way. IE tends to show alt attributes as tooltips rather than titles, Safari makes a much better job of title attributes than IE. For the same look in all browsers, my advice is to look at overlib at http://www.bosrup.com/web/overlib/ and then mark up your targets using spans, as sajuks suggests. This would all be very easy using Smarty as it has built-in support for overlib.

BTW, some research into the basics of HTML would get you a long way - read the tutorials on http://www.w3schools.com/
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.