Привожу сильно порезанный код (только самое необходимое). Можно его воткнуть в файлик HTML и открыть браузером. Предназначен только для IE8 !! (без вариантов, только так).
При такой реализации если смотреть через отладчик, то после вызова proc(n) в сам документ добавляется несколько узлов DIV, при последующем вызове proc(n+1) добавляется ещё несколько узлов DIV и так каждый раз. В результате страница разрастается, отображается только то что требуется, а в отладчике присутствуют ВСЕ добавленные узлы. Хотелось бы чтоб при очередном вызове proc() не просто создавались новые узлы, а предварительно удалялись старые узлы!
<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: 1px solid; border-top: 1px solid; visibility: hidden; font: 900 15px tahoma; border-left: 2px solid; border-bottom: 2px solid; letter-spacing: 2px; position: absolute}
</STYLE>
<SCRIPT language=JavaScript>
ToolTip.offsetX = - (10 + 400 + 10)
ToolTip.offsetY = 17
function ToolTip(obj, text)
{
if (!obj || obj.nodeType != 1) { throw "Illigal argument exception" }
var tip = document.createElement("DIV")
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 initToolTips()
{
//if(document.getElementById('tool_tip') && document.getElementById('tool_tip').parentNode) { document.getElementById('content').removeChild(document.getElementById('tool_tip')) }
var tags, tooltext
for(var i = 0; i < arguments.length; i++)
{
tags = document.body.getElementsByTagName(arguments[i])
for (var j = 0; j < tags.length; j++)
if ((tooltext = tags[j].getAttribute('tooltip')) && tags[j].className != "ready") { tags[j].className = "ready"; ToolTip(tags[j], tooltext) }
}
}
var colon = new Array()
function proc(js)
{
switch (js)
{
case "62": colon = ["66","А","Б","В","Г","Д"]; break
case "96": colon = ["98","Д","Б","В","Г","А"]; break
case "01": colon = ["04","А","Г","В","Б","Д"]; break
}
os = ""
for (var i = 1; i < colon.length; i++) { os += "<IMG tooltip='" + colon[i] + "' src='" + colon[i] + ".jpg'>" }
ts.innerHTML = "<DIV id='content'>" + os + "</DIV>"
initToolTips("img")
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src='screens1.jpg' onClick=proc('62')> <IMG src='screens2.jpg' onClick=proc('96')> <IMG src='screens3.jpg' onClick=proc('01')>
<DIV id='ts'>Область загрузки<DIV><SCRIPT language=JavaScript>proc('62')</SCRIPT>
</BODY>
</HTML>