Simple onmouseover javascript help, will rep!

Ok I have:
<img src="images/scalethree.gif">

I want it so when they hover that image a small hovering box appears saying Hello on the image (hovering box isnt at a specific point, but where the image is).

Should be easy... will give rep

 

I'm pretty sure you mean an actual hover box immediately when the mouse is over the image? Because you can always set the alt tag to "Hello", and Hello will appear as a tooltip when you hover with the mouse, but it takes a few seconds to appear.

 

There's plenty of articles online which allow you to add captions using CSS, here's one for example, taken from http://www.thecssninja.com/xhtml/advanced-hover-css

HTML:

<a class="feature01" href="#">
	<span class="overlay01">
		<span class="caption01">Roll over</span>
	</span>
	<img src="images/scalethree.gif" />
</a>

Code (markup):

CSS:

a.feature01
{
	display: block;
	border: 1px solid #dfd0cb;
	border-width: 0 1px 1px 0;
	margin: 20px 20px 1em 20px;
	float: left;
	position: relative;
}
a.feature01:hover { border-color: #000; }
 
	a.feature01:hover .overlay01
	{
		position: absolute;
		z-index: 3;
		width: 194px;
		height: 200px;
		border: 3px solid #fff;
	}
		a.feature01 .overlay01 .caption01
		{
			position: absolute;
			height: 30px;
			line-height: 30px;
			width: 100%;
			z-index: 3;
			text-indent: -9999em;
			color: #000;
			font-size: 11px;
			bottom: 0;
			overflow: hidden;
		}
		a.feature01:hover .caption01
		{
			text-indent: 10px;
			background: rgb(255,255,255);
			/* for browsers that know rgba */
			background: rgba(255, 255, 255, 0.75);
		}
		a.feature01 img { display: block; }

Code (markup):

 

Alt wont work for what I am trying to do in the long run.

I will try out the other link you sent... thanks.

 

Ahh looking for another method as the images may be different sizes.

 

If anyone runs into the same problem, this worked like gold!

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm