Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: How do you?

  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do you?

    How do you make that yellow box pop up when you move your mouse over a link?

    I think it has something to do with ALT="text" but I can't figure out how to make it work!

    Please help.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Have a play around with this




    <SCRIPT language="JavaScript">
    <!--
    function showLayer(name) {
    name.style.visibility = "visible";
    }

    function hideLayer(name) {
    name.style.visibility = "hidden";
    }
    // -->
    </SCRIPT>

    <a href="null" onmouseout="hideLayer(thisone)" onmouseover="showLayer(thisone)">Mouseover this link</a>

    <DIV id="thisone" style="position:relative;top:20; width:100; border:2 inset blue;background-color:gold;visibility: hidden; z-index: 1">Do You Mean Like This</div>


  • #3
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    <p title="This is text">Hello</p>

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tooltip script

    See Dynamic drive for the code Works a treat.

    Put this in the <a> tag

    onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()"

    Like so - <a href="http://dynamicdrive.com" onMouseover="showtip(this,event,'Visit Dynamic Drive for DHTML Scripts!')" onMouseout="hidetip()">Dynamic Drive</a>

    and this script in the <head> tag

    <script>
    if (!document.layers&&!document.all)
    event="test"
    function showtip(current,e,text){

    if (document.all){
    thetitle=text.split('<br>')
    if (thetitle.length>1){
    thetitles=''
    for (i=0;i<thetitle.length;i++)
    thetitles+=thetitle[i]
    current.title=thetitles
    }
    else
    current.title=text
    }

    else if (document.layers){
    document.tooltip.document.write('<layer bgColor="white" style="border:1px solid black;font-size:12px;">'+text+'</layer>')
    document.tooltip.document.close()
    document.tooltip.left=e.pageX+5
    document.tooltip.top=e.pageY+5
    document.tooltip.visibility="show"
    }
    }
    function hidetip(){
    if (document.layers)
    document.tooltip.visibility="hidden"
    }

    </script>

    I think thats it.
    Therapy is expensive, popping bubble wrap is cheap, you choose.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ragol_67

    Nightfire answered your question most directly. the title attribute is what creates this.

    <a href="page.htm" title="Here is a link!">Click me!</a>
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, title is best. The alt="" attribute for images isn't even supposed to show the mouseover tooltip but IE does anyway. Mozilla won't show it.

    On a side note, doesn't <img> have an "alt-src" attribute which displays the alt-src (image url) if the src cannot be found? I read about it somewhere but there's nothing about it at w3schools.com
    Offtone.com - In the works...

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uh, there's lowsrc and dynsrc that I know of...
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    ragol_67:

    Kindly read 1) here:

    MUST READ- How to post a JavaScript question!

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,646
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If your site is to be indexed by search engines, make sure you use keywords/phrases in both the title for links and the alt for images.

    <a href="page.html" title="Baseball stories">Baseball stories</a>

    <img src="rose.jpg" alt="Baseball hit leader"></img>
    Last edited by zoobie; 10-05-2002 at 05:04 PM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •