For one, two objects can't have the same ID, you'd need to use a class. Second, there is no native document.getElementsByClassName. Well, there is, but only Firefox 3 and Safari 3 implement it, so you can't use it yet. SO, that brings us to the simplest solution: bust out jQuery! Take a look at how I modified this function:<!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>multi rollover</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <!-- Oh hey, look, it's jQuery! -->
<script type="text/javascript">
function rollOverImage(obj, class, newText){
$(obj).unbind("mouseout"); //remove all old mouseout event listeners so things don't overlap.
$('.'+class).each(function(){ //loop through all objects that match the class name
var t = $(this); //store local reference to this
var original = t.text(); //better than .innerHTML with jQuery
t.text(newText);
$(obj).mouseout(function(){ //Attach event listener for mouseout to the rolled over object
t.text(original); //sets it back to the original text
})
});
}
</script>
</head>
<body>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverImage(this, 'happy', 'I\'m happy!')"/>
</div>
<div class="happy">
original text
</div>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverImage(this, 'happy', 'I\'m happy, also!')"/>
</div>
<div class="happy">
original text #2
</div>
</body>
</html>