Hello CodingForums,
This is regarding script that could be used as imaging maping with updating tooltips
here is the snippet
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>CSS Image Map</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<STYLE type=text/css>#map {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 500px; PADDING-RIGHT: 0px; FONT-FAMILY: arial, helvetica, 

sans-serif; BACKGROUND: url(http://img.pususu.com/art/2011/12/rudi-de-wet-74929-500-651.jpg) #fff no-repeat left top; HEIGHT: 651px; FONT-SIZE: 8pt; 

PADDING-TOP: 0px
}
#map LI {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: 

none; PADDING-TOP: 0px
}
#map LI A {
POSITION: absolute; DISPLAY: block; BACKGROUND: url(blank.gif); COLOR: #000; TEXT-DECORATION: none
}
#map LI A SPAN {
DISPLAY: none
}
#map LI A:hover SPAN {
BORDER-BOTTOM: #000 1px solid; POSITION: relative; FILTER: alpha(opacity=80); BORDER-LEFT: #000 1px solid; 

PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; WIDTH: 200px; PADDING-RIGHT: 5px; DISPLAY: block; BACKGROUND: #fff; 

BORDER-TOP: #000 1px solid; TOP: 20px; BORDER-RIGHT: #000 1px solid; PADDING-TOP: 5px; LEFT: 20px; opacity: 0.8
}
#map A.post1 {
WIDTH: 80px; HEIGHT: 90px; TOP: 280px; LEFT: 60px
}
#map A.post2 {
WIDTH: 50px; HEIGHT: 50px; TOP: 158px; LEFT: 275px
}
#map A.post3 {
WIDTH: 50px; HEIGHT: 50px; TOP: 335px; LEFT: 30px
}
#map A.post4 {
WIDTH: 115px; HEIGHT: 95px; TOP: 400px; LEFT: 150px
}
#map A.post5 {
WIDTH: 70px; HEIGHT: 120px; TOP: 365px; LEFT: 315px
}
</STYLE>
<script>
function movecontent(){
document.getElementById("test").innerHTML = document.getElementById("textsarea").innerHTML;
}
</script>
<script type="text/javascript">
function getEl(){
var ev = arguments[0] || window.event,
origEl = ev.target || ev.srcElement;
document.getElementById(origEl.id).innerHTML = document.getElementById("textsarea").innerHTML;
}
document.onclick = getEl;
</script>

</HEAD>
<BODY>
<UL id=map>
<LI><A id=test1 class=post1 title=Post1 href="#"><SPAN><B>Test</B><BR>Text, text, text.</div></SPAN></LI>
<LI><A id=test2 class=post2 title=Post2 href="#"><SPAN><B>Test</B><BR>Text, text, text.</div></SPAN></A></LI>
<LI><A id=test3 class=post3 title=Post3 href="#"><SPAN><B>Test</B><BR>Text, text, text.</div></SPAN></A></LI>
<LI><A id=test4 class=post4 title=Post4 href="#"><SPAN><B>Test</B><BR>Text, text, text.</div></SPAN></A></LI></UL>


<div id="test"></div>
<textarea id="textsarea"></textarea>
<button onclick="movecontent()">Input</button>

</BODY></HTML>
So, it needs following updates:
-improved get and input scripts
-append innerhtml style
-save function

Please respond with examples