ok here goes - think this is the kinda thing you're after.....

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Rollovers</title>
    
<script type="text/javascript">
var xmlHttp;

/*
2 Different ways of starting the request depending upon browser
1 for IE and 1 for everyone else - now aint that a big shock! 
*/
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

/*
Handles most of the work 
 - Creates the request
 - Calls the function which handles what happens when we have a response change
 - creates the URL
*/
function startRequest(element) {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
	var url = "sample.php?id=" + escape(element.id);
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

/*
Tells the script what to do when it gets a response
readyState 4 means loaded
*/
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
			document.getElementById("show").innerHTML = xmlHttp.responseText;
        }
    }
}
</script>

<!-- Some CSS stuff to make it pretty -->
<style type="text/css">
<!--
.container {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	background-color: #333333;
	padding: 10px;
	width: 300px;
	height: 120px;
	border: thin solid #FFFFFF;
	margin: auto;
}
body {
	background-color: #666666;
}
a:link {
	color: #999999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #999999;
}
.side {
	float: left;
	width: 100px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #FFFFFF;
}
#show {
	margin-left: 140px;
	font-family: "Courier New", Courier, mono;
	font-size: 120px;
	font-weight: bold;
	color: #990000;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
	<div class="container">
	
		<!-- The link 'id' is sent via GET to the backend script -->
		<div class="side">
		   <a id="1" href="#" onMouseover="startRequest(this);">Link Number 1</a><br />
		   <a id="2" href="#" onMouseover="startRequest(this);">Link Number 2</a><br />
		   <a id="3" href="#" onMouseover="startRequest(this);">Link Number 3</a><br />
		   <a id="4" href="#" onMouseover="startRequest(this);">Link Number 4</a><br />
		   <a id="5" href="#" onMouseover="startRequest(this);">Link Number 5</a><br />
		   <a id="6" href="#" onMouseover="startRequest(this);">Link Number 6</a><br />
		   <a id="7" href="#" onMouseover="startRequest(this);">Link Number 7</a><br />
		   <a id="8" href="#" onMouseover="startRequest(this);">Link Number 8</a><br />
		   <a id="9" href="#" onMouseover="startRequest(this);">Link Number 9</a><br />
		</div>
		
		<!-- The DIV which displays the rollover text -->
		<div id="show"></div>
		
	</div>
   
   
</body>
</html>
the php file it is calling is very simple just as an example

Code:
<?php

$id = $_GET['id'];

if(!$id)
	{
	echo "!";
	}
else
	{
	if(!is_numeric($id))
		{
		echo "!";
		}
	else
		{
		switch ($id) {
			case 1:
			   echo "#1";
			   break;
			case 2:
			   echo "#2";
			   break;
			case 3:
			   echo "#3";
			   break;
			case 4:
			   echo "#4";
			   break;
			case 5:
			   echo "#5";
			   break;
			case 6:
			   echo "#6";
			   break;
			case 7:
			   echo "#7";
			   break;
			case 8:
			   echo "#8";
			   break;
			case 9:
			   echo "#9";
			   break;
			default:
			   echo "!";
			}
		}
	}
?>
As for the XHTML/CSS I dont mean you can use them as a complete substitute for JS just that you could create the rollovers using CSS and have the text displayed that way. Rather than fetching it from the server each time.