Хочу примерно тоже самое что и в вашем варианте, но только у меня оно должно подгружаться из файлов js (находятся в том же каталоге что и сама страничка).
За код не пинайте, я тока учусь...
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE>
IMG {border-width:0px; margin: 3px; align: center}
.tool_tip { border-right: #9191a2 1px solid; padding-right: 12px; border-top: #9191a2 1px solid; padding-left: 12px; visibility: hidden; padding-bottom: 12px; font: 900 15px tahoma; border-left: #9191a2 2px solid; color: #9191f2; padding-top: 12px; border-bottom: #9191a2 2px solid; letter-spacing: 2px; position: absolute; background-color: #aafaff}
</STYLE>
<SCRIPT language=JavaScript>
ToolTip.offsetX = - (10 + 400 + 10)
ToolTip.offsetY = 17
var arrT = [], arrImg = []
function ToolTip(obj, text)
{
if (!obj || obj.nodeType != 1) { throw "Illigal argument exception" }
var tip = document.createElement("DIV")
arrT.push(tip)
tip.className = "tool_tip"
tip.innerHTML = "<CENTER><FONT size=+3>"+text+"</FONT><BR><IMG height=400 width=400 src='"+text+".jpg'><IMG height=400 width=400 src='"+text+".jpg'></CENTER>"
tip.style.top = 10
tip.style.left = 10
document.body.appendChild(tip)
obj.onmouseout = function(ev)
{ tip.style.visibility = "hidden" }
obj.onmousemove = function(ev)
{
tip.style.visibility = "visible"
if (window.event) { ev = window.event }
if (ev.clientX+20+tip.offsetWidth+18 > document.body.clientWidth) { ToolTip.offsetX =- tip.offsetWidth - 20 } else { ToolTip.offsetX = 20 }
if (ev.clientY+10+tip.offsetHeight+0 > document.body.clientHeight) { ToolTip.offsetY =- tip.offsetHeight - 10 } else { ToolTip.offsetY = 10 }
tip.style.left = ev.clientX + document.body.scrollLeft + ToolTip.offsetX
tip.style.top = ev.clientY + document.body.scrollTop + ToolTip.offsetY
}
}
function RunJava(resurs)
{
var fso = new ActiveXObject("Scripting.FileSystemObject")
var b = fso.FileExists(resurs)
if (b) { eval(fso.OpenTextFile(resurs, 1, 0).ReadAll()) }
}
var colon = new Array()
function stroka(colon)
{
os += "<TABLE><TR>"
for (var i = 1; i < colon.length; i++)
{
os += "<TD><P>....<IMG tooltip='" + colon[i][1] + "' src='" + colon[i][1]+ ((colon[i][0]=="+")?"":"-") + ".jpg'>...</TD>"
var img = document.createElement("img")
arrImg.push(img)
img.src = colon[i][1]+".jpg"
ts.appendChild(img)
ToolTip(img, colon[i][1])
}
os+="</TR></TABLE>"
}
function proc(js)
{
for (var i = 0; i < arrT.length; i++)
{
arrT[i].parentNode.removeChild(arrT[i])
arrImg[i].parentNode.removeChild(arrImg[i])
}
arrT = [], arrImg = []
os = ""
p = location.href
p = p.replace("file:///","")
p = p.replace(/%20/g," ")
p = p.replace(/\//g,"\\")
t = p.split('\\')
RunJava(p.substring(0,p.length - t[t.length - 1].length) + "resurs" + js + ".js")
ts.innerHTML = os
}
</script>
</head>
<body>
<script>
var pp = new Array()
pp = ["62","96","01"]
for (var i = 0; i < pp.length; i++)
document.write("<img src='screens"+(i+1)+".jpg' onclick=proc('"+pp[i]+"')>")
</script>
<div id='ts'></div><script>proc('62')</script>
</body>
</html>
resurs01.js
stroka ([["66","#"],["+","А1"],["+","Б1"],["-","В8"],["-","Г4"],["+","Д5"]])
stroka ([["67","#"],["+","А2"],["-","Б3"],["+","В7"],["+","Г9"],["-","Д1"]])
stroka ([["68","#"],["+","А3"],["+","Б5"],["-","В1"],["+","Г2"],["+","Д8"]])
resurs62.js
stroka ([["68","#"],["+","А3"],["+","Б5"],["-","В1"],["+","Г2"],["+","Д8"]])
stroka ([["67","#"],["+","А2"],["-","Б3"],["+","В7"],["+","Г9"],["-","Д1"]])
stroka ([["66","#"],["+","А1"],["+","Б1"],["-","В8"],["-","Г4"],["+","Д5"]])
resurs96.js
stroka ([["66","#"],["+","А1"],["+","Б1"],["-","В8"],["-","Г4"],["+","Д5"]])
stroka ([["68","#"],["+","А3"],["+","Б5"],["-","В1"],["+","Г2"],["+","Д8"]])
stroka ([["67","#"],["+","А2"],["-","Б3"],["+","В7"],["+","Г9"],["-","Д1"]])