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
    New Coder
    Join Date
    Jan 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Controling display type with m-overs

    Hi all, I really need some help, I need to link a mouse over of a nav item to the display of an info box. By default the info box needs to have a display property of none, when the mouse overs a particular nav item a spacific info box related to that nav item, its display property must change to block.

    Any help would be much appriciated.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 235 Times in 230 Posts
    Hi there Gambithunt,

    here is an example, it may suit your requirments...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Button Messages</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background:#dddddd;
     }
    button {
         margin:2px;
         font-family:arial;
         font-size:14px;
         color:#ffffff;
         background:#000000;
     }
    #foo {
         position:absolute;
         left:200px;
         border:solid 1px #000000;
         background:#ccccff;
         width:210px;
         padding:2px;
         font-family:arial;
         font-size:12px;
         text-align:center;
         display:none;
     }
    #container {
         position:absolute;
         left:100px;
         top:100px;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var where=new Array();
          where[0]="http://www.google.com/";
          where[1]="http://www.yahoo.com/";
          where[2]="http://www.lycos.com/";
    
    var message=new Array();
          message[0]="this button will take you to google";
          message[1]="this button will take you to yahoo";
          message[2]="this button will take you to lycos";
    
    function showMess(m,t) {
         document.getElementById('foo').style.display="block";
         document.getElementById('foo').style.top=t+"px";
         document.getElementById('foo').innerHTML=message[m];
         document.onmouseout=function() {
         document.getElementById('foo').style.display="none";
         document.getElementById('foo').innerHTML="";
      }
     }
    
    function goTo(u) {
         location.href=where[u];
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <button onclick="goTo(0)" onmouseover="showMess(0,106)">where to</button><br />
    <button onclick="goTo(1)" onmouseover="showMess(1,133)">where to</button><br />
    <button onclick="goTo(2)" onmouseover="showMess(2,160)">where to</button>
    </div>
    
    <div id="foo"></div>
    
    </body>
    </html>
    coothead

  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks coothead, I'll give it a try

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    You could also just add the title attribute to your links. This would be a more acessible solution.

    ex.
    Code:
    <a href="http://www.codingforums.com" title="This link takes you to CodingForums.com">
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The same effect could also be acheived with CSS, I think.
    Last edited by shlagish; 12-28-2004 at 04:21 AM.
    Shawn


  •  

    Posting Permissions

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