Annotation of loncom/html/htmlarea/popups/insert_image.html, revision 1.1
1.1 ! www 1: <html style="width: 398; height: 218">
! 2:
! 3: <head>
! 4: <title>Insert Image</title>
! 5:
! 6: <script type="text/javascript" src="popup.js"></script>
! 7:
! 8: <script type="text/javascript">
! 9: var preview_window = null;
! 10:
! 11: function Init() {
! 12: __dlg_init();
! 13: document.getElementById("f_url").focus();
! 14: };
! 15:
! 16: function onOK() {
! 17: var required = {
! 18: "f_url": "You must enter the URL",
! 19: "f_alt": "Please enter the alternate text"
! 20: };
! 21: for (var i in required) {
! 22: var el = document.getElementById(i);
! 23: if (!el.value) {
! 24: alert(required[i]);
! 25: el.focus();
! 26: return false;
! 27: }
! 28: }
! 29: // pass data back to the calling window
! 30: var fields = ["f_url", "f_alt", "f_align", "f_border",
! 31: "f_horiz", "f_vert"];
! 32: var param = new Object();
! 33: for (var i in fields) {
! 34: var id = fields[i];
! 35: var el = document.getElementById(id);
! 36: param[id] = el.value;
! 37: }
! 38: if (preview_window) {
! 39: preview_window.close();
! 40: }
! 41: __dlg_close(param);
! 42: return false;
! 43: };
! 44:
! 45: function onCancel() {
! 46: if (preview_window) {
! 47: preview_window.close();
! 48: }
! 49: __dlg_close(null);
! 50: return false;
! 51: };
! 52:
! 53: function onPreview() {
! 54: alert("FIXME: preview needs rewritten:\n show the image inside this window instead of opening a new one.");
! 55: var f_url = document.getElementById("f_url");
! 56: var url = f_url.value;
! 57: if (!url) {
! 58: alert("You have to enter an URL first");
! 59: f_url.focus();
! 60: return false;
! 61: }
! 62: var img = new Image();
! 63: img.src = url;
! 64: var win = null;
! 65: if (!document.all) {
! 66: win = window.open("about:blank", "ha_imgpreview", "toolbar=no,menubar=no,personalbar=no,innerWidth=100,innerHeight=100,scrollbars=no,resizable=yes");
! 67: } else {
! 68: win = window.open("about:blank", "ha_imgpreview", "channelmode=no,directories=no,height=100,width=100,location=no,menubar=no,resizable=yes,scrollbars=no,toolbar=no");
! 69: }
! 70: preview_window = win;
! 71: var doc = win.document;
! 72: var body = doc.body;
! 73: if (body) {
! 74: body.innerHTML = "";
! 75: body.style.padding = "0px";
! 76: body.style.margin = "0px";
! 77: var el = doc.createElement("img");
! 78: el.src = url;
! 79:
! 80: var table = doc.createElement("table");
! 81: body.appendChild(table);
! 82: table.style.width = "100%";
! 83: table.style.height = "100%";
! 84: var tbody = doc.createElement("tbody");
! 85: table.appendChild(tbody);
! 86: var tr = doc.createElement("tr");
! 87: tbody.appendChild(tr);
! 88: var td = doc.createElement("td");
! 89: tr.appendChild(td);
! 90: td.style.textAlign = "center";
! 91:
! 92: td.appendChild(el);
! 93: win.resizeTo(el.offsetWidth + 30, el.offsetHeight + 30);
! 94: }
! 95: win.focus();
! 96: return false;
! 97: };
! 98: </script>
! 99:
! 100: <style type="text/css">
! 101: html, body {
! 102: background: ButtonFace;
! 103: color: ButtonText;
! 104: font: 11px Tahoma,Verdana,sans-serif;
! 105: margin: 0px;
! 106: padding: 0px;
! 107: }
! 108: body { padding: 5px; }
! 109: table {
! 110: font: 11px Tahoma,Verdana,sans-serif;
! 111: }
! 112: form p {
! 113: margin-top: 5px;
! 114: margin-bottom: 5px;
! 115: }
! 116: .fl { width: 9em; float: left; padding: 2px 5px; text-align: right; }
! 117: .fr { width: 6em; float: left; padding: 2px 5px; text-align: right; }
! 118: fieldset { padding: 0px 10px 5px 5px; }
! 119: select, input, button { font: 11px Tahoma,Verdana,sans-serif; }
! 120: button { width: 70px; }
! 121: .space { padding: 2px; }
! 122:
! 123: .title { background: #ddf; color: #000; font-weight: bold; font-size: 120%; padding: 3px 10px; margin-bottom: 10px;
! 124: border-bottom: 1px solid black; letter-spacing: 2px;
! 125: }
! 126: form { padding: 0px; margin: 0px; }
! 127: </style>
! 128:
! 129: </head>
! 130:
! 131: <body onload="Init()">
! 132:
! 133: <div class="title">Insert Image</div>
! 134:
! 135: <form action="" method="get">
! 136: <table border="0" width="100%" style="padding: 0px; margin: 0px">
! 137: <tbody>
! 138:
! 139: <tr>
! 140: <td style="width: 7em; text-align: right">Image URL:</td>
! 141: <td><input type="text" name="url" id="f_url" style="width:75%"
! 142: title="Enter the image URL here" />
! 143: <button name="preview" onclick="return onPreview();"
! 144: title="Preview the image in a new window">Preview</button>
! 145: </td>
! 146: </tr>
! 147: <tr>
! 148: <td style="width: 7em; text-align: right">Alternate text:</td>
! 149: <td><input type="text" name="alt" id="f_alt" style="width:100%"
! 150: title="For browsers that don't support images" /></td>
! 151: </tr>
! 152:
! 153: </tbody>
! 154: </table>
! 155:
! 156: <p />
! 157:
! 158: <fieldset style="float: left; margin-left: 5px;">
! 159: <legend>Layout</legend>
! 160:
! 161: <div class="space"></div>
! 162:
! 163: <div class="fl">Alignment:</div>
! 164: <select size="1" name="align" id="f_align"
! 165: title="Positioning of this image">
! 166: <option value="" >Not set</option>
! 167: <option value="left" >Left</option>
! 168: <option value="right" >Right</option>
! 169: <option value="texttop" >Texttop</option>
! 170: <option value="absmiddle" >Absmiddle</option>
! 171: <option value="baseline" selected="1" >Baseline</option>
! 172: <option value="absbottom" >Absbottom</option>
! 173: <option value="bottom" >Bottom</option>
! 174: <option value="middle" >Middle</option>
! 175: <option value="top" >Top</option>
! 176: </select>
! 177:
! 178: <p />
! 179:
! 180: <div class="fl">Border thickness:</div>
! 181: <input type="text" name="border" id="f_border" size="5"
! 182: title="Leave empty for no border" />
! 183:
! 184: <div class="space"></div>
! 185:
! 186: </fieldset>
! 187:
! 188: <fieldset style="float:right; margin-right: 5px;">
! 189: <legend>Spacing</legend>
! 190:
! 191: <div class="space"></div>
! 192:
! 193: <div class="fr">Horizontal:</div>
! 194: <input type="text" name="horiz" id="f_horiz" size="5"
! 195: title="Horizontal padding" />
! 196:
! 197: <p />
! 198:
! 199: <div class="fr">Vertical:</div>
! 200: <input type="text" name="vert" id="f_vert" size="5"
! 201: title="Vertical padding" />
! 202:
! 203: <div class="space"></div>
! 204:
! 205: </fieldset>
! 206:
! 207: <div style="margin-top: 85px; text-align: right;">
! 208: <hr />
! 209: <button type="button" name="ok" onclick="return onOK();">OK</button>
! 210: <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
! 211: </div>
! 212:
! 213: </form>
! 214:
! 215: </body>
! 216: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/icons/back.gif){kind=icon}
Return to insert_image.html CVS log ![[TXT]](/icons/text.gif){kind=icon}
![[DIR]](/icons/dir.gif){kind=icon}
Up to [LON-CAPA] / loncom / html / htmlarea / popups