Java or html code for word descriptions?

Discussion in 'Web Design & Coding' started by apu95, Jul 26, 2005.

  1. apu95

    apu95 Caffeine-->Code Converter

    Messages:
    502
    Location:
    Montreal, Canada
    Hey guys...

    My gf's website has lots of technical terms in it, and whenever one of those terms appear, she links it to a pop up window which contains the glossary of all words. In addition to this, we wanna add a mouseover code which shows the definition of the word. I tried the 'title= blabla' code within the hyperlink code, but the problem with this one is that it is rather small for some definitions, and I noticed that on Firefox, the descriptions aren't shown completely (when they're too long), while in IE they're shown completely.

    While trying to look for another solution, I saw it on the OSNN mainpage. If you look at any of the headlines, say the "A Few Xbox 360 Impressions" story, some words are highlighted in green, and when you point at them a little box appears which shows sponsored links and stuff. I'm looking for exactly that, but of course instead of the sponsored link thing, we'd put the definition of the word instead.

    Any ideas on how to get that? Or something very closely resembling that?

    Thanks in advance,
    Apu
     
  2. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    I know a website that has done this sort of thing really nicely with either CSS or Javascript, I will see if I can dig it up
     
  3. apu95

    apu95 Caffeine-->Code Converter

    Messages:
    502
    Location:
    Montreal, Canada
    thx a lot, it would be really useful ;)
     
  4. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    I cant seem to remember the name of the website nor can I remember pieces of the content enough to find it, grrr
     
  5. you could use the acronym tag i think it'll do what you want when you hover the mouse over the text it'll show the text in small box
    Code:
    <acronym title="Operating System News Network">OSNN</acronym>
    
    or if you wanna do it with a definition
    Code:
    <acronym title="Definition of the word here">Word</acronym>
    
    or you could use the 'title' attribute in a tag (ie: anchor tags, acronym tags....) and it'll display the text in a box but title by itself isn't a tag it's an attribute
     
    Last edited: Jul 27, 2005
  6. apu95

    apu95 Caffeine-->Code Converter

    Messages:
    502
    Location:
    Montreal, Canada
    Thanks for the replies guys :)

    I actually did try both of those, but they only work in IE. For example, one word is "Gecko", so when I use the tag, I want the definition to be:

    "any lizard of the family Gekkonidae. All geckos (except of the Eublepharinae subfamily, the true eyelid geckos) have immovable lens-like eyelids (brilles) and adhesive lamellae on the undersides of their toes that allow them to deftly climb most horizontal and vertical surfaces."

    The problem with this is that it only works in IE. IE shows the full box with the whole definition, whereas Firefox shows a smaller box which encompasses the first 13 words, approximately.

    Hope someone can find it :)
    I'm gonna keep looking myself!

    Thanks again!
    Apu
     
  7. Blue Jack

    Blue Jack OSNN Addict

    Messages:
    103
    I was pondering about a vbs script to kick out a label on mouseover, and when I was searching I found this instead:

    Code:
    function initToolTips()
    {  document.addEventListener('mouseover',constructToolTip,true);
       document.addEventListener('mouseout',deleteToolTip,true);
       document.addEventListener('mousemove',moveToolTip,true);
    }
    
    function constructToolTip(e)
    { var target=e.target;
        if(target.nodeName=='#text') target=target.parentNode;
        if(target.getAttribute('tooltip'))
          { if(tooltip) deleteToolTip(e);
            tooltip = document.createElement('DIV');
            document.body.appendChild(tooltip);
            tooltip.appendChild(
               document.createTextNode(target.getAttribute('tooltip')));
            setTimeout('displayToolTip()',ttDelay);
          }
    }
    
    function displayToolTip()
    { if(tooltip)
         { tooltip.style.display='block';
         }
    }
    Source and more code snipletts: http://www.vladdy.net/WebDesign/Tooltips.html

    I'll still look for some vbs/xml scripts I have laying around from class, maybe one will work for you.
     
  8. apu95

    apu95 Caffeine-->Code Converter

    Messages:
    502
    Location:
    Montreal, Canada
    Thx so much for the reply Blue Jack :)
    I'm not sure if it works or not though...I'm not very familiar on how to go about implementing it, even on a blank page. Mind if I ask for a bit of guidance?

    Thanks again,
    Apu
     
  9. Blue Jack

    Blue Jack OSNN Addict

    Messages:
    103
    I dug around that author's site, and he has a working downloadable eval: http://www.klproductions.com/kltooltips.html

    I didn't know he was charging for the full code, sorry. You can check out everything from the eval package and see what he did. It comes with css and the js file.

    Check out the download and use it as an example. There is an html page included with some great examples.