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 ?

Apr 3 '09 #1

Subscribe Post Reply

3550

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>

Apr 3 '09 #2

David Laakso

397

Expert 256MB

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.

Apr 3 '09 #3

Similar topics

mouseover on all browsers

by: Nick | last post by:

I can't make out why this won't work in iexplorer (even when I change 'Netscape'). The mouse over works fine in >Netscape 4 and Opera 5 and 7. Is it a simple fix or is that wishful thinking? ...

Javascript

Need to know if this is even possible (mouseover mayhem, long)

by: J. Makela | last post by:

Hallo. This should be a pretty entertaining question for you *real* javascript writers.. I, being the lowly photoshop guy at an ad agency made the mistake of actually saying "HTML" in a...

Javascript

Optimizing code for span mouseover invocation.

by: Alex | last post by:

On my page I have a lot string like this: <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span> <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span> <span...

Javascript

HTML image map mouseover help

by: Annette Acquaire | last post by:

I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...

HTML / CSS

calculate the horse's movement

by: sircool | last post by:

hi guys, the problemm is that you have a horse on the chess board.You should write a function that calculate the horse's movement.I mean how many movement later you can go every point on the board.I...

C / C++

Compounding MouseOver

by: Schannah | last post by:

I'm trying to create a design which mimics the Radiohead website in the action on this page, but the problem is that they use PHP for the effect and I have no idea about PHP. I'm very amateur: fairly...

Javascript

mouseover only works correctly on second mouseover.

by: dave345 | last post by:

This javascript issue is in an app using C# / .Net 2.0 running on XP. First post, please mention if I mess up any conventions of this forum. I’ve got a mouseover event that only works properly...

Javascript

slow response in table cells <TD> to mouseover with IE6 but fine inFirefox.

by: markszlazak | last post by:

I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the...

Javascript

Track Mouse Movement when the cursor is off screen?

by: mike | last post by:

I have the opportunity to rescue a project that uses a mouse to sense the relative position of a machine. The hardware is built...just needs to be programmed. Stop snickering!!! I didn't do it...I...

Visual Basic 4 / 5 / 6

Sockets for sending/receiving mouse movement

by: hurricane_number_one | last post by:

I am creating a simple server application, that will listen for incoming mouse coordinates and then move the mouse accordingly. So basically it's like a very simple VNC server without and screen...

Visual Basic .NET

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware