Надоело однажды возиться со скриншотами располагая там ярлычки к подписям элементов интерфейса в нужных местах — и родился этот небольшой дхтмл редактор. с его помощью можно расположить на картинке (простым драг-н-дропом) различные элементы (пока просто ярлычки с цифрами от 1 до XXX),
а скрипт сгенерит код, который можно прямо в chm вставить (в сгенеренном коде ярлычки будут спозиционированы через CSS)
естественно можно и другие варианты применения найти. коментарии приветсвуются. наверняк это где-то кто-то делал но я не нашел
инсталляция — копируете все что ниже черты в новый html файл и открываете его эксплорером
<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 = "move";
}
}
function setScreenshot()
{
ThisForm=document.forms['main'];
sScreenshotPath=ThisForm.userfile.value;
document.images['lf_preview'].src='file:///'+sScreenshotPath;
}
var iLabelCount=1;
function AddLabel()
{
ThisForm=document.forms['main'];
if(ThisForm.newlabel.value.length==0){
alert("Задайте текст для метки сначала!");
return;
}
var LabelDiv="<div style='text-align: center; margin: 1; padding: 1; position:absolute; background-color: yellow; border: 1 solid black;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70)' id='label_"+iLabelCount+"'> "+iLabelCount+" </div>";//onmouseover='cursEl();' onmousemove='moveEl();' onmouseup='dropEl();' onmouseleave='moveEl();' onmousedown='grabEl();'
var LabelTextDiv="<div id='label_text_"+iLabelCount+"'>"+iLabelCount+". "+ThisForm.newlabel.value+" </div>";
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--;
ThisForm=document.forms['main'];
//alert("--"+document.all["label_"+iLabelCount].outerHTML);
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 LabelDiv="<div style='position:absolute; 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)' id='label_"+i+"'> "+i+" </div>\n";//z-index: "+(10+i)+";
res+=LabelDiv;
}
res+="</div>\n";
res+="<br>\n";
res+="<div id='screenshot_legend'>\n";
for(i=1;i<iLabelCount;i++){
res+="<div>";
res+=document.all["label_text_"+i].innerHTML;
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("JustforTestJustforTestJustforTestJustforTest JustforTestJust forTestJustforTestJustforTest JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforTest ");
dn.document.write("JustforTestJustforTestJustforTes tJustforTest JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforTestJustforTest JustforTestJu stforTestJustforTest ");
dn.document.write("JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforT estJustforTest JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforTest ");
dn.document.write("JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforTestJ ustforTest JustforTestJustforTestJustforTest ");
dn.document.write("JustforTestJustforTestJustforTestJustforTest JustforTestJustf orTestJustforTestJustforTest JustforTestJustforTestJustforTestJustforTest JustforTestJustforTestJustforTest ");
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("</body></html>");
dn.document.close();
}
</script>
<body>
<form name="main" id="main" method="get" action="none">
Данная страница (Explorer only!) позволяет сгенерить содержимое HTML страницы, на которой будет картинка (скриншот какого-либо окна программы например) и подписи к различным элементам этой картинки с нумерованными ярлычками на самой картинке.
Ярлычки будут спозиционированы поверх картинки с помощью CSS, во время создания ярлычки переносятся на нужные места простым дран-н-дропом
<br>Сделано by IPv6 @2006 <a href="http://www.wiredplane.com/">WiredPlane.com</a>
<hr>
Для начала работы задайте путь к картинке которую <br>вы хотите описать (заменит кота): <input type=file size=30 name="userfile" value="" onChange="setScreenshot();">
<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>
<br>
<input type=text size=30 name="newlabel" value="<описание>">
<input type=button value="Добавить ярлык с описанием" onClick="AddLabel();">
<br>
<a href="#" onClick="javascript:DelLastLabel();">Удалить последнее добавленное</a>
<br>
<a href="#" onClick="javascript:TestPage();">Протестировать/Скопировать результат</a>
<hr>
</form>
</body>
</html>
