<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var swaps = new Array();
// define swap['html elements id'] = 'text'
swaps['image_1'] = 'Image one text';
swaps['image_2'] = 'Image two text';
swaps['image_3'] = 'Image three text';
// element that will update
var updateElementId = 'caption';
window.onload = function() {
var changeElement = document.getElementById(updateElementId);
for(x in swaps) {
if(!document.getElementById(x)) { continue; }
var element = document.getElementById(x);
addEvent(element,'mouseover',packageEvent(changeEl ement,swaps[x]),false);
}
// default swap
changeImageCaption('',changeElement,swaps['image_1'] );
}
function packageEvent(pElement,pText) {
return function(pEvt) { changeImageCaption(pEvt,pElement,pText); };
}
function changeImageCaption(pEvt,pElement,pText) {
var text = document.createTextNode(pText);
if(pElement.firstChild) {
var child = pElement.firstChild;
pElement.replaceChild(text,child);
} else {
pElement.appendChild(text);
}
}
function addEvent(elm,evType,fn,useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType,fn,useCapture);
return true;
} else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
} else {
elm['on'+evType]=fn;
return;
}
}
</script>
</head>
<body>
<div id="image_1" style="width:50px;height:50px;background-color:red;"></div>
<div id="image_2" style="width:50px;height:50px;background-color:red;"></div>
<div id="image_3" style="width:50px;height:50px;background-color:red;"></div>
<p id="caption"></p>
</body>
</html>
That will do it.
To keep it simple stupid though your image elements will need to have a unique id. Your changing element/module will also need an id. Than you just define those in javascript.