Hi there Newbi28,
and a warm welcome to these forums. 
Here is a basic example...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>image map mouseover/mouseout</title>
<style>
.hide {
display:none;
}
</style>
<script>
(function() {
'use strict';
function init(){
var obj=document.getElementById('note');
var ar=document.getElementById('FPMap0').getElementsByTagName('area');
for(var c=0;c<ar.length;c++){
ar[c].number=c;
ar[c].onmouseover=function() {
obj.className='';
obj.innerHTML='this is area number '+this.number;
this.onmouseout=function() {
obj.className='hide';
}
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div>
<map name="FPMap0" id="FPMap0">
<area href="http://www.portfolio.com" shape="rect" coords="0,226,351,398" alt="" />
<area href="http://www.EPM.com" shape="rect" coords="351,228,695,301" alt="" />
<area href="http://www.Request.com" shape="rect" coords="350,302,695,376" alt="" />
<area href="http://www.IPCS.com" shape="rect" coords="698,230,1278,376" alt="" />
</map>
<img alt="" src="SiteAssets/TopHeader.PNG" width="1299" height="377" usemap="#FPMap0" />
</div>
<div id="note" class="hide"></div>
</body>
</html>[/color]
coothead
