Try this CSS:
Code:
html{padding:0px;margin:0px;}
body{position:absolute;background-color:white;margin:0 0 0 140px;width:960px;height:auto;color:black;padding:0px;}
h1{margin:20px 0px 15px 70px;text-align:center;font:28px 'arial';color:#db0b0b;padding:0;}
p{font:16px 'arial';margin:10px 0px 10px 0px;}
#area1{position:absolute;top:30%;left:50%;margin-top:-30px;margin-left:-20px;}
#area2{position:relative;top:-120px;left:-210px;}
#map{border:solid 1px black;}
#test1{position:absolute;top:487px;left:241px;width:198px;height:198px;}
#test1:hover{background-image:url("maptest.png");}
#test1:hover #area1{display:none;}
#container{position:relative;}
I'm not sure if that's what you're going for or not, but it sounds like it to me.
Now, if you're going for a full map of Europe and you want to have the countries highlight as your mouse enters their borders I have to warn you: this really can't be done without either 1) an enormous amount of HTML/CSS or 2) some javascript.
I tried doing something similar with an aerial map of a farm/B&B and wasted quite a lot of time with image maps trying to get a working solution to highlight certain buildings or fields when their exact feature boundaries were hovered over. In the end, it was a lot of time wasted. Then again, this was pre-HTML5 and CSS3, so maybe there is a viable method these days...but I haven't seen it executed so far. I guess I'm just saying you might want to prepare yourself for the idea of resorting to at least a little javascript for this.