|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Image Properties</title>
<style type="text/css">
body { background-color: transparent; margin: 10px; font-family: Verdana; font-size: 7pt; }
div#Views { height: 150px; border: solid 1px; }
div#Preview { display: none; }
div#Tabbar { position: relative; left: 0px; top: 0px; }
div#Tabbar div { position: absolute; top: 0px; left: 1px; display: inline; width: 90px; height: 17px; text-align: center; line-height: 16px; cursor: pointer; }
table { width: 368px; border-collapse: collapse; margin: 5px; }
td { width: 92px; border: solid 1px; height: 20px; vertical-align: middle; cursor: pointer;}
td.value { width: 273px; cursor: default; }
td span { margin-left: 5px; }
td input { font-family: Verdana; font-size: 7pt; font-weight: bold; margin-left: 3px; margin-right: 3px; }
td select { width: 75px; border: solid 1px; background-color: transparent; color: transparent; font-family: Verdana; font-size: 7pt; font-weight: bold; margin-left: 3px; }
td input.url { width: 268px; border: solid 1px; }
td input.text { width: 268px; border: solid 1px; }
td input.size { width: 30px; border: solid 1px; }
td input.unit { width: 15px; border: solid 1px; }
td input.hidden { display: none; }
td input.images { width: 60px; font-weight: normal; margin-top: 1px; margin-right: 0px; height: 16px; font-size: 6pt; }
</style>
</head>
<body>
<form id="form1" action="Image.htm" onsubmit="return false;">
<div>
<div id="Views">
<div id="Properties">
<table id="PropertiesTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td onclick="fx.SelectLabel(this)"><span>Url</span></td>
<td class="value"><input type="text" id="UrlTextBox" class="url" maxlength="1024" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" /></td>
</tr>
<tr>
<td onclick="fx.SelectLabel(this)"><span>Alternate Text</span></td>
<td class="value"><input type="text" id="AlternateTextTextBox" class="text" maxlength="512" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" /></td>
</tr>
<tr>
<td onclick="fx.SelectLabel(this)"><span>Dimensions</span></td>
<td class="value">
<span>Height:</span>
<input type="text" id="HeightTextBox" class="size" maxlength="4" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
<span>Width:</span>
<input type="text" id="WidthTextBox" class="size" maxlength="4" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
<span>Border:</span>
<input type="text" id="BorderWidthTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
</td>
</tr>
<tr>
<td onclick="fx.SelectLabel(this)"><span>Alignment</span></td>
<td class="value">
<span>Float:</span>
<select id="FloatSelectBox" onfocus="fx.SelectLabel(this)">
<option value="">None</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
<span>Vertical:</span>
<select id="VerticalAlignSelectBox" onfocus="fx.SelectLabel(this)">
<option value="">None</option>
<option value="text-top">Top</option>
<option value="middle">Middle</option>
<option value="text-bottom">Bottom</option>
</select>
</td>
</tr>
<tr>
<td onclick="fx.SelectLabel(this)"><span>Margins</span></td>
<td class="value">
<span>Left:</span>
<input type="text" id="MarginLeftTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
<span>Top:</span>
<input type="text" id="MarginTopTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
<span>Right:</span>
<input type="text" id="MarginRightTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
<span>Bottom:</span>
<input type="text" id="MarginBottomTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
</td>
</tr>
<tr>
<td onclick="fx.SelectLabel(this)"><span>ToolTip</span></td>
<td class="value"><input type="text" id="ToolTipTextBox" class="text" maxlength="512" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" /></td>
</tr>
</table>
</div>
<div id="Preview"></div>
</div>
<div id="Tabbar">
<div id="PropertiesTab" onclick="fx.OnTab(this)"><span>Properties</span></div>
<div id="PreviewTab" onclick="fx.OnTab(this)" style="left: 93px;"><span>Preview</span></div>
</div>
</div>
</form>
<script type="text/javascript">
var fx = null;
String.prototype.trim = function()
{
return this.replace(/^\s+|\s+$/g, '');
}
function OnBeforeViewChange(viewID)
{
switch (viewID)
{
case "Preview" :
Preview();
break;
default :
break;
}
}
function OnAfterViewChange(viewID)
{
switch (viewID)
{
case "Properties" :
fx.Focus('UrlTextBox');
break;
default :
break;
}
}
function GetInitialPreviewOuterHTML()
{
var colors = fx.options.colors;
var bgColor = "background-color:" + colors.body;
var fgColor = "color:" + colors.text;
var outerHTML =
"<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>" +
"<html xmlns='http://www.w3.org/1999/xhtml'>" +
"<head>" +
"<title>Preview Frame</title>" +
"<style type='text/css'>" +
"body {" + bgColor + "; " + fgColor + "; font-family: Verdana; font-size: 7pt; margin: 0px; padding: 0px; }" +
"</style>" +
"</head>" +
"<body></body>" +
"</html>";
return outerHTML;
}
function GetProperties()
{
var p = new Object();
p.elements = new Object();
p.values = new Object();
p.elements.urlTextBox = document.getElementById("UrlTextBox");
p.elements.altTextBox = document.getElementById("AlternateTextTextBox");
p.elements.heightTextBox = document.getElementById("HeightTextBox");
p.elements.widthTextBox = document.getElementById("WidthTextBox");
p.elements.borderWidthTextBox = document.getElementById("BorderWidthTextBox");
p.elements.floatSelectBox = document.getElementById("FloatSelectBox");
p.elements.verticalAlignSelectBox = document.getElementById("VerticalAlignSelectBox");
p.elements.marginLeftTextBox = document.getElementById("MarginLeftTextBox");
p.elements.marginTopTextBox = document.getElementById("MarginTopTextBox");
p.elements.marginRightTextBox = document.getElementById("MarginRightTextBox");
p.elements.marginBottomTextBox = document.getElementById("MarginBottomTextBox");
p.elements.toolTipTextBox = document.getElementById("ToolTipTextBox");
p.values.url = fx.GetValue(p.elements.urlTextBox);
p.values.alt = fx.GetValue(p.elements.altTextBox);
p.values.height = fx.GetValue(p.elements.heightTextBox);
p.values.width = fx.GetValue(p.elements.widthTextBox);
p.values.borderWidth = fx.GetValue(p.elements.borderWidthTextBox);
p.values.styleFloat = fx.GetValue(p.elements.floatSelectBox);
p.values.verticalAlign = fx.GetValue(p.elements.verticalAlignSelectBox);
p.values.marginLeft = fx.GetValue(p.elements.marginLeftTextBox);
p.values.marginTop = fx.GetValue(p.elements.marginTopTextBox);
p.values.marginRight = fx.GetValue(p.elements.marginRightTextBox);
p.values.marginBottom = fx.GetValue(p.elements.marginBottomTextBox);
p.values.toolTip = fx.GetValue(p.elements.toolTipTextBox);
var style = "";
var v = p.values;
if (v.height) style += "height: " + v.height + "px; ";
if (v.width) style += "width: " + v.width + "px; ";
if (v.borderWidth) style += "border: solid " + v.borderWidth + "px; ";
if (v.styleFloat) style += "float: " + v.styleFloat + "; ";
if (v.verticalAlign) style += "vertical-align: " + v.verticalAlign + "; ";
if (v.marginLeft) style += "margin-left: " + v.marginLeft + "px; ";
if (v.marginTop) style += "margin-top: " + v.marginTop + "px; ";
if (v.marginRight) style += "margin-right: " + v.marginRight + "px; ";
if (v.marginBottom) style += "margin-bottom: " + v.marginBottom + "px; ";
p.style = style;
return p;
}
function GetImageHtml()
{
var html = "";
var p = GetProperties();
var v = p.values;
if (v.url)
{
html += "<img src='" + v.url + "'";
html += " alt='" + (v.alt ? v.alt : "") + "'";
if (p.style.length > 0)
html += " style='" + p.style + "'";
if (v.toolTip)
html += " title='" + v.toolTip + "'";
html += "/>";
}
return html;
}
function GetLatinText()
{
return "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum accumsan, ipsum ut dapibus dapibus, nunc arcu congue velit, sit amet pretium est felis ut libero. Suspendisse hendrerit vestibulum pede."
}
function Preview()
{
var f = document.getElementById("PreviewFrame");
var d = f.contentDocument || f.contentWindow.document || f.document;
var html = GetImageHtml();
if (html.length == 0)
html += "Url is <strong>not</strong> entered";
else
html += GetLatinText();
d.body.innerHTML = html;
}
function InitializePreview()
{
var preview = document.getElementById("Preview");
var f = document.createElement("iframe");
f.id = "PreviewFrame";
f.frameBorder = "0";
f.height = "140px";
f.width = "368px";
f.scrolling = "auto";
f.style.margin = "5px";
preview.appendChild(f);
var frameDocument = f.contentWindow.document;
var outerHTML = GetInitialPreviewOuterHTML();
frameDocument.open("text/html", "replace");
frameDocument.write(outerHTML);
frameDocument.close();
}
function InitializeValues(img)
{
var p = GetProperties();
var e = p.elements;
var s = img.style;
var url = img.getAttribute("src");
e.urlTextBox.value = url ? url : "";
e.altTextBox.value = img.alt ? img.alt : "";
e.heightTextBox.value = s.height ? fx.RemoveUnit(s.height) : "";
e.widthTextBox.value = s.width ? fx.RemoveUnit(s.width) : "";
e.borderWidthTextBox.value = s.borderWidth ? fx.GetBorderWidth(s.borderWidth) : "";
e.floatSelectBox.value =
s.styleFloat ? fx.FindOption(e.floatSelectBox, s.styleFloat) : "";
e.verticalAlignSelectBox.value =
s.verticalAlign ? fx.FindOption(e.verticalAlignSelectBox, s.verticalAlign) : "";
e.marginLeftTextBox.value = s.marginLeft ? fx.RemoveUnit(s.marginLeft) : "";
e.marginTopTextBox.value = s.marginTop ? fx.RemoveUnit(s.marginTop) : "";
e.marginRightTextBox.value = s.marginRight ? fx.RemoveUnit(s.marginRight) : "";
e.marginBottomTextBox.value = s.marginBottom ? fx.RemoveUnit(s.marginBottom) : "";
e.toolTipTextBox.value = img.title ? img.title : "";
}
function SetValues(img)
{
var p = GetProperties();
var v = p.values;
img.src = v.url ? v.url : "";
img.alt = v.alt ? v.alt : "";
img.style.cssText = p.style;
img.title = v.toolTip ? v.toolTip : "";
}
function Initialize(frameworkBehavior)
{
fx = frameworkBehavior;
fx.InitializeDocument();
fx.InitializeViews("Views", "Properties,Preview");
fx.InitializeTabs("Tabbar", "PropertiesTab,PreviewTab");
fx.InitializeTables("PropertiesTable");
InitializePreview();
if (fx.IsParent("img"))
{
InitializeValues(fx.context.parentElement);
}
fx.Focus('UrlTextBox');
}
function OnOK()
{
if (fx.IsParent("img"))
{
SetValues(fx.context.parentElement);
}
else
{
var html = GetImageHtml();
if (html.length == 0) return;
fx.ExecuteCommand("inserthtml", html);
}
}
</script>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Eric Williams is a .NET and Web developer who has been working with ASP.NET AJAX since the March 2006 Atlas CTP. Eric is the founder of Winthusiasm (winthusiasm.com), a .NET technology company that offers consulting and development services, and Colorado Geographic (coloradogeographic.com).
Submit an article or tip