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 5 of 5
  1. #1
    Regular Coder cyrus709's Avatar
    Join Date
    Dec 2008
    Posts
    102
    Thanks
    22
    Thanked 5 Times in 5 Posts

    Link javascript html hover?

    Alright so i have a code that when you hover over it, a pop up appears, and when you move your mouse away it disappears. The problem is that when i turn it into a link, the code does not work at all.

    here is the code that goes into the header
    PHP Code:
    <script type="text/javascript">
    function 
    ShowPopup(hoveritem)
    {
    hp document.getElementById("hoverpopup");

    // Set position of hover-over popup
    hp.style.top hoveritem.offsetTop 18;
    hp.style.left hoveritem.offsetLeft 20;

    // Set popup to visible
    hp.style.visibility "Visible";
    }

    function 
    HidePopup()
    {
    hp document.getElementById("hoverpopup");
    hp.style.visibility "Hidden";
    }
    </script> 
    And here is the JS that goes into the body
    PHP Code:
    <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me!</a>
    <
    div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;"><table bgcolor="#0000FF">
    <
    tr><td><font color="#FFFFFF">This is my popup</font></td></tr>
    <
    tr><td bgcolor="#8888FF">Hello I am a popup table</td></tr></table></div
    right now the code works fine, but when i turn the hover text into a link, it no longer works? how can i make it work for links?
    Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Can you give us a link to your test page? You haven't given enough to determine what's up.

    I'm also wondering if you've validated your HTML and if you are getting any Javascript errors.

  • #3
    Regular Coder cyrus709's Avatar
    Join Date
    Dec 2008
    Posts
    102
    Thanks
    22
    Thanked 5 Times in 5 Posts
    I do not have the page online however the script works, This is the code.
    I can substitute "Hover over me" with anything, images etc. but not links.
    This is the entire code. (actually im converting some php variables into Javascript and then putting them in the hover pop up, and that works fine, )

    but this is the basic code and it does not work with a link hover and as that is what i need it to do... This code all alone is enough to make it do what i want, im not perfect with JS so i got the code of this site
    http://www.calcaria.net/javascript/2...tml-popup.html

    and here would be an example

    http://www.calcaria.net/javascript/h...ver_popup.html

    The code works, just not when i input links.
    Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Well now I'm really confused, because the script you linked to uses an <a> tag as the hover example, and it works fine.

  • Users who have thanked Fumigator for this post:

    cyrus709 (05-04-2009)

  • #5
    Regular Coder cyrus709's Avatar
    Join Date
    Dec 2008
    Posts
    102
    Thanks
    22
    Thanked 5 Times in 5 Posts
    hmm guess i should have paid more attention to the code, thanks the problem is that i was putting another <a> tag inside of the already existing <a> tags. Thanks
    Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.


  •  

    Posting Permissions

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