Div mouseover movement ?!?!

wastedguitarist

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

p.s
my code is as follows

Expand|Select|Wrap|Line Numbers

 <!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>

David Laakso

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

A CSS method
http://www.cssplay.co.uk/menu/balloons.html

A Javasrcript method
http://jqueryfordesigners.com/demo/coda-bubble.html

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

Div mouseover movement ?!?!

re: Div mouseover movement ?!?!

re: Div mouseover movement ?!?!

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about