Div mouseover movement ?!?!

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • wastedguitarist
    New Member
    • Mar 2009
    • 7

    Div mouseover movement ?!?!

    Hey i am building a website, we are in the very early stages of development.

    The site can be viewed on www.urememberit.com

    What I want to do, is when a user rolls over the numbered images (1 to 4)

    The div of the bubble (shown at the bottom) appears where the cursor is, showing information on the image, then disappears when the mouse leaves the image.

    I have no idea how to go about this, can any help me out ?
  • wastedguitarist
    New Member
    • Mar 2009
    • 7

    #2
    p.s
    my code is as follows

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>U Remember It</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <meta name="Robots" content="NOINDEX" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" />
    <link rel="stylesheet" type="text/css"
    href="style.css" />
    
    <style type="text/css">
    <!--
    .style4 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 14px;
    }
    .style5 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    }
    .style6 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    
    -->
    </style>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    <body>
    
    <div id="left">
    <div id="login"></div>
    
    <div id="navbar">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="61%" height="89" align="right">&nbsp;</td>
        <td width="39%" align="left" valign="middle"><span class="style6">TEXT HERE</span></td>
      </tr>
      <tr>
        <td height="117" align="right">&nbsp;</td>
        <td align="left" valign="middle"><span class="style6">TEXT HERE</span></td>
      </tr>
      <tr>
        <td height="81" align="right">&nbsp;</td>
        <td align="left" valign="middle"><span class="style6">TEXT HERE</span></td>
      </tr>
    </table>
    </div>
    
    <div id="navbottom">
      <div align="center">
        <p>
          <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','300','height','164','title','Graph','src','Flash/graph','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/graph' ); //end AC code
        </script>
          <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="300" height="164" title="Graph">
              <param name="movie" value="Flash/graph.swf" />
              <param name="quality" value="high" />
              <embed src="Flash/graph.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="164"></embed>
            </object>
            </noscript>
        </p>
        <table width="96%" border="0" cellspacing="10" cellpadding="0">
          <tr>
            <td width="61%" bgcolor="#CCCCCC"><p class="style4">EDIT PROFILE</p>
              <p class="style4">PREDICT MY MEMORIES</p>
              <p class="style4">WHO'S LIKE ME?</p></td>
            <td width="39%" bgcolor="#CCCCCC"><p class="style5"><strong>HISTORY</strong></p>
              <p class="style5"><strong>I FEEL LUCKY</strong></p>
              <p class="style5"><strong>HELP</strong></p></td>
          </tr>
        </table>
        </div>
    </div>
    </div><div id="right">
    <div id="menu">MENU WILL BE HERE</div>
    <div id="content">
      <table width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td width="24%"><div align="center"><img src="Images/1.jpg" width="200" height="200" /></div></td>
        <td width="24%"><img src="Images/2.jpg" width="200" height="200" /></td>
        <td width="3%"><img src="Images/3.jpg" width="200" height="200" /></td>
        <td width="49%"><img src="Images/4.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    </div>
      
    </div>
    <div id="bubble"></div>
    </body>
    </html>
    Last edited by acoder; Apr 4 '09, 12:09 PM. Reason: Added [code] tags - please use them

    Comment

    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397

      #3
      Maybe these will help get you started in a search to find a specific solution for what you want to do?

      A CSS method


      A Javasrcript method


      I'm not going to even think about asking why you are constructing a table based layout in the year of our lord 2009.

      Comment

      Working...