Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

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
0
kwaoc
Asked:
kwaoc
  • 8
  • 7
1 Solution
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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