Use JavaScript to create powerful GUIs (3)

Create function Insert_link () {
var str = Document.selection.createRange (). text;
Document.my_form.my_textarea.focus ();
var my_link = prompt ("Enter URL:", "http://");
if (My_link!= null) {
var sel = Document.selection.createRange ();
Sel.text = "<a href=\" "+ My_link +" \ ">" + str + "</a>";
}
Return
}
The second function, Insert_link (), is the same as Format_sel (), plus prompt (), which allows the user to enter the value of a hypertext link. Using the results of prompt (), we can combine the selected text and code to create a connection. With these functions, we can create all types of interfaces for the user. Let's take a look at the example below.

using system colors in CSS

The easiest way to use the above function on a Web site is to call these functions in the OnClick event handler of the "bold", "Italic", and "link" buttons, but that's not exciting enough. Since we use the Selection object and limit ourselves to the Ie/win platform, we should take full advantage of IE's features, use user-defined system colors in CSS, and create dynamic buttons like we see in other software. Let's take a look at the style sheet that defines the toolbars, buttons, and the states that are raised and pressed two of buttons.

#toolbar {
margin:0;
padding:0;
width:262px;
Background:buttonface;
border-top:1px solid buttonhighlight;
border-left:1px solid buttonhighlight;
border-bottom:1px solid Buttonshadow;
border-right:1px solid Buttonshadow;
Text-align:right;
}

. button {
Background:buttonface;
border:1px solid buttonface;
Margin:1;
}

. Raised {
border-top:1px solid buttonhighlight;
border-left:1px solid buttonhighlight;
border-bottom:1px solid Buttonshadow;
border-right:1px solid Buttonshadow;
Background:buttonface;
Margin:1;
}

. pressed {
border-top:1px solid Buttonshadow;
border-left:1px solid Buttonshadow;
border-bottom:1px solid buttonhighlight;
border-right:1px solid buttonhighlight;
Background:buttonface;
Margin:1;
}