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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    having problems positioning a textbox on hover

    having an issue with trying to work out the best way to overcome my current issue.

    what i am trying to accomplish best case scenario is as i hover over a link i get a descriptive box over on the right of this describing what the link is preferable like the nav bar always visible near the top right .

    now i have got some examples of trying to get this to work but it not that good currently.

    I am currently using a span to accomplish this but have a few issues with it so far.

    the first two links are my css sheet and the verified html page but it doesn't look the way i want it.

    the third link is the page that is more like what i want. but still not 100% what i need.

    be aware my whole page is self sizing so absolute position with measurements are out of the question.

    Please help and if span is not the option whatever someone can suggest to put me on the right path.

    I currently using pure css and html for the page but running out of ideas if no suggestions will use java if that will accomplish the task needed be but prefer not too.

    CSS verified

    theknowledgeden .com / default .css

    Verified html

    theknowledgeden .com / ancient-afr .html

    non verified html but closer to what i am trying to accomplish.

    theknowledgeden .com / ancient -asia .html

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    103
    Thanks
    0
    Thanked 13 Times in 13 Posts
    you can accomplish this by using spans like you are, incorporated with a javascript onhover event..
    When the onhover event is triggered you will want to do something like this

    Code:
    <script type="text/javascript">
       function ohevent() {
       document.getElementById("example_id").innerHTML="description";
       }
    </script>
     </head>
    <body>
       <img src="" onhover="ohevent()" /><span id="example_id"></span>
    </body>


  •  

    Posting Permissions

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