Сам же себя и улучшу.
Версия два которая дает редактировать ярлыки уже после добавления их к картинке
и кроме ярлыков позволяет докидывать на страницу кроме ярлыков еще и точек (чтобы от ярлыка можно
было например проводить линии к контролу на картинке-скриншоте, поточнее), а также при наведении на ярлык
подсвечивается соотв. метка и при наведении на метку подсвечивается соотв. строчка в описании/легенде к
скриншоту. правда данный вариант уже заточен под ИЕ (document.all), но для chm-а самое оно.
Инсталляция такая же — все что после черты в новый файл и открываем в Explorerе
<html>
<title>DTHML Help builder by IPv6</title>
<script>
var whichEl = null;
var activeEl = null;
var sScreenshotPath="http://www.doronchenko.ru/uploads/posts/1144289873_kotdavinchi.jpg";
function checkEl() {
if (whichEl!=null) { return false }
}
document.onselectstart = checkEl;
function grabEl()
{ // function for onmousedown
if(event.srcElement.name!="lf_preview" && event.srcElement.id!="screenshot_field"){
whichEl = event.srcElement;
if (whichEl != activeEl) {
if(activeEl!=null){
whichEl.style.zIndex = activeEl.style.zIndex + 1;
}
activeEl = whichEl;
}
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft)+7;
currentY = (event.clientY + document.body.scrollTop);
}
}
function moveEl()
{ // function for onmousemove
if (whichEl == null) { return };
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichEl.style.pixelLeft += distanceX;
whichEl.style.pixelTop += distanceY;
event.returnValue = false;
}
function dropEl()
{ // function for onmouseup
whichEl = null;
}
function cursEl()
{
if(event.srcElement.name!="lf_preview" && event.srcElement.id!="screenshot_field"){
event.srcElement.style.cursor = "pointer";
}
}
function setScreenshot()
{
ThisForm=document.forms['main'];
sScreenshotPath=ThisForm.userfile.value;
document.images['lf_preview'].src='file:///'+sScreenshotPath;
}
var iMarkCount=1;
function AddMark()
{
var LabelDiv="<span style='text-align: center; margin: 1; padding: 1; position:absolute; width: 8px; height: 8px; background-color: yellow; border: 1 solid black;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); font-size: 1px;' id='mark_"+iMarkCount+"'></span>";
document.all['screenshot_field'].innerHTML=LabelDiv+document.all['screenshot_field'].innerHTML;
iMarkCount++;
}
function DelLastMark()
{
if(iMarkCount<=1){
alert("Нечего удалять!");
return;
}
iMarkCount--;
document.all["mark_"+iMarkCount].outerHTML="";
}
var iLabelCount=1;
function AddLabel()
{
ThisForm=document.forms['main'];
if(ThisForm.newlabel.value.length==0){
alert("Задайте текст для метки сначала!");
return;
}
var sLabelValue=iLabelCount+". "+ThisForm.newlabel.value;
var sLabel=" "+iLabelCount+" ";
sLabelValue = sLabelValue.replace(/\"/g,""");
sLabelValue = sLabelValue.replace(/\'/g,"'");
var LabelDiv="<div style='text-align: center; margin: 1; padding: 1; position:absolute; width:20px; height: 20px; background-color: yellow; border: 1 solid black;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70)' id='label_"+iLabelCount+"'>"+sLabel+"</div>";
var LabelTextDiv="<input type=text size=50 id='label_text_"+iLabelCount+"' name='label_text_"+iLabelCount+"' value=\""+sLabelValue+"\">";
document.all['screenshot_field'].innerHTML=LabelDiv+document.all['screenshot_field'].innerHTML;
document.all['screenshot_legend'].innerHTML=document.all['screenshot_legend'].innerHTML+LabelTextDiv;
ThisForm.newlabel.value="";
iLabelCount++;
}
function DelLastLabel()
{
if(iLabelCount<=1){
alert("Нечего удалять! Сначала создайте ярлыки для удаления :)");
return;
}
iLabelCount--;
document.all["label_"+iLabelCount].outerHTML="";
document.all["label_text_"+iLabelCount].outerHTML="";
}
function GenerateResult()
{
var res="";
var imx=document.all["lf_preview"].style.pixelLeft;
var imy=document.all["lf_preview"].style.pixelTop;
res+="<!-- Generated by DTHMHelpBuilder (made by IPv6, (c)2006 WiredPlane.com). Use on your oun risk -->\n";
res+="<div id='screenshot_field' style='position: relative; left: 0; top: 0;'><!-- position: relative - обязательно! -->\n";
res+="<img src='"+sScreenshotPath+"' style='z-index: 1;' >\n";
for(i=1;i<iLabelCount;i++){
var iT=document.all["label_"+i].innerHTML;
var LabelDiv="<div id='label_"+i+"' style='position:absolute; width: 20; height: 20; top: "+(document.all["label_"+i].style.pixelTop-imy)+"; left: "+(document.all["label_"+i].style.pixelLeft-imx)+"; text-align: center; margin: 1; padding: 1; background-color: yellow; border: 1 solid black;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70)' ";
LabelDiv+=' onmouseenter=\'document.all["label_text_'+i+'"].style.backgroundColor="#FFDDDD";\' onmouseleave=\'document.all["label_text_'+i+'"].style.backgroundColor="transparent";\'';
LabelDiv+=">"+iT+"</div>\n";
res+=LabelDiv;
}
for(i=1;i<iMarkCount;i++){
var LabelDiv="<span style='position:absolute; width: 8px; height: 8px; font-size: 1px; top: "+(document.all["mark_"+i].style.pixelTop-imy)+"; left: "+(document.all["mark_"+i].style.pixelLeft-imx)+"; margin: 1; padding: 1; background-color: yellow; border: 1 solid black;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85)' id='mark_"+i+"'></span>\n";
res+=LabelDiv;
}
res+="</div>\n";
res+="<br>\n";
res+="<div id='screenshot_legend'>\n";
for(i=1;i<iLabelCount;i++){
if(document.all["label_text_"+i].value.length>0){
res+="<div id='label_text_"+i+"' style='padding:1; margin:1;' ";
res+=' onmouseenter=\'document.all["label_'+i+'"].style.backgroundColor="#FF9999";\' onmouseleave=\'document.all["label_'+i+'"].style.backgroundColor="yellow";\'';
res+=">";
res+=document.all["label_text_"+i].value;
res+="</div>\n";
}
}
//alert(res);
res+="</div>";
return res;
}
function TestPage()
{
var dn=window.open("","_blank");
dn.document.open();
dn.document.write("<html><body>");
dn.document.write("Как это будет выглядеть у Вас на странице. Естественно вид DIVов и пр. можно и нужно поменять через CSS. Позиции желтых квадратиков устойчивы к скроллингу и ресайзу<hr>");
var sLine=GenerateResult();
dn.document.write(sLine);
dn.document.write("<hr>Результат. Скопируйте его себе куда нужно:<br><pre>");
/*
reLT=new RegExp("<","g");
reGT=new RegExp(">","g");
sLine = sLine.replace(reLT,"<");
sLine = sLine.replace(reGT,">");
dn.document.write(sLine);
dn.document.write("</pre>");
*/
dn.document.write("<table border=1 width=100%><tr><td><textarea wrap=off rows=30 style='width: 100%;'>");
dn.document.write(sLine);
dn.document.write("</textarea></table>");
dn.document.write("</body></html>");
dn.document.close();
}
</script>
<body>
<form name="main" id="main" method="get" action="none">
Данная страница (Explorer only!) позволяет сгенерить содержимое HTML страницы, на которой будет картинка (скриншот какого-либо окна программы например) и подписи к различным элементам этой картинки с нумерованными ярлычками на самой картинке. При наведении на подпись будет выделятся соотв. ярлык и наоборот
Ярлычки будут спозиционированы поверх картинки с помощью CSS, во время создания ярлычки переносятся на нужные места простым дран-н-дропом. Заточено под Explorer (Заведомо работает в chm файлах)
<br>Сделано by IPv6 @2006 <a href="http://www.wiredplane.com/">WiredPlane.com</a>
<hr>
1) Задайте картинку-фон (заменит кота): <input type=file size=30 name="userfile" value="" onChange="setScreenshot();"><br>
2) Добавляйте ярлычки. Вы сможете отредактировать текст ярлычков и после добавления.
<br><input type=text size=30 name="newlabel" value="">
<input type=button value="Добавить ярлык с описанием" onClick="AddLabel();">
<input type=button value="+Точка" onClick="AddMark();">
<input type=button value="-Точка" onClick="DelLastMark();">
<br>
<a href="javascript:DelLastLabel();">Удалить последнее добавленное</a> <a href="#" onClick="javascript:TestPage();">Протестировать/Скопировать результат</a>
<hr>
<div id="screenshot_legend" style='float: right; width: 40%; text-align: left;'></div>
<div id="screenshot_field" onmouseover='cursEl();' onmousemove='moveEl();' onmouseup='dropEl();' onmouseleave='dropEl();' onmousedown='grabEl();' style='position: relative; left: 0; top: 0;'><!-- position: relative - обязательно! -->
<img id="lf_preview" name="lf_preview" src="http://www.doronchenko.ru/uploads/posts/1144289873_kotdavinchi.jpg">
</div>
<hr>
</form>
</body>
</html>
п.с. Рсдн довольно удобное место для хранения code-snippetoв
