Help Coding this Rollover Effect

Okay, so I need help coding this rollover effect. I basically have a div with some text that I want the text to change as well as the position of the div to change.

A good example of what I want is at http://omg.yahoo.com. Here is a screenshot. http://img8.imageshack.us/img8/3174/screenshoti.gif

I am fairly experienced with coding html/css but not javascript or ajax. How do I make it so that when I hover over the div, the text itself changes and the position of the text changes?

Thank you,
David

 

You could look at dynamic drive and change around their scripts to make it do what you want.

 

Do you have a link to the script on dynamic drive that would be closest to that? or no...

 

In case anyone is lost, this might help some folks.

Okay. This is a brief explanation, because this isn't really what I need to do.

What I need, is to somehow display a new div OVER the current div when I hover over it. (or at least that's what I think)

Here's what I currently have code wise. Check out the screenshot first though, for a better idea. [SCREENSHOT]

            <a href="#" class="newshover"><div class="newsimg" id="fix"><div class="blacktext">FIX</div></div></a>
            <a href="#" class="newshover"><div class="newsimg" id="your"><div class="blacktext">YOUR</div></div></a>
            <a href="#" class="newshover"><div class="newsimg" id="get"><div class="blacktext">GET</div></div></a>

HTML:

AND here is the CSS.

	.newsimg {
		width: 143px;
		height: 317px;
		margin-left:10px;
		float:right; 
		text-align:center; }
		#get {
			background: url(images/get.png); }
		#your {
			background: url(images/your.png); }
		#fix {
			background: url(images/fix.png); }
		#fix:hover, #your:hover, #get:hover {
			background:url(images/hover.png);}
		.blacktext {
			font:Arial, Helvetica, sans-serif;
			background:#000000;
			letter-spacing:-5px;
			color:#fe0078;
			width:131px;
			height:48px;
			margin-left:6px;
			margin-top:263px;
			font-size:42px;
			font-weight:100; }

HTML:

Hopefully this helps.

*P.S. In case you need an explanation on the screen shot, the far left image is when the mouse is hovering. The rest is self explanatory.

 

I actually just figured it out.

            <div id="fix"><div class="hovering"><div class="blacktext">FIX</div></div></div>
            <div id="your"><div class="hovering"><div class="blacktext">YOUR</div></div></div>
            <div id="get"><div class="hovering"><div class="blacktext">GET</div></div></div>


CSS
		.newsbg {
			width: 143px;
			height: 317px;
			margin-left:10px;
			float:right; 
			text-align:center;
			position:relative; }
		#get {
			background: url(images/get.png); }
		#your {
			background: url(images/your.png); }
		#fix {
			background: url(images/fix.png); }
		.hovering {
			width:143px;
			height:317px;
			position:absolute;
			top:0;
			left:0;
			}
		.hovering:hover {
			background:url(images/hover.png); }
		.blacktext {
			font:Arial, Helvetica, sans-serif;
			background:#000000;
			letter-spacing:-5px;
			color:#fe0078;
			width:131px;
			height:48px;
			margin-left:6px;
			margin-top:263px;
			font-size:42px;
			font-weight:100;
			z-index:200; }

HTML: