A simple Property inspector example in Dreamweaver

The following Property inspector inspects the marquee tag, which is available only in Microsoft Internet Explorer. The example lets you set the value of the direction attribute in the Property inspector. To set the value of the marquee tag’s other attributes, use this example as a model.

To create this extension, you create the user interface, write the JavaScript code, create the image, and test.

You create an HTML file that contains a form, which appears in the Property inspector.

Create a new blank file.
As the first line of the file, add the comment that identifies the Property inspector, as follows:
```
 
```

To specify the document title and the JavaScript file that you will create, add the following after the comment:

 <HTML> 
<HEAD> 
<TITLE>Marquee Inspector</TITLE> 
<SCRIPT src="marquee.js"></SCRIPT> 
</HEAD> 
<BODY> 
 
</BODY> 
</HTML>

To specify what appears in the Property inspector, add the following between the opening and closing body tags:

 <!-- Specify the image that will appear in the Property inspector --> 
<SPAN ID="image" STYLE="position:absolute; width:23px; height:17px; ¬ 
    z-index:16; left: 3px; top: 2px"> 
    <IMG SRC="marquee.png" WIDTH="36" HEIGHT="36" NAME="marqueeImage"> 
</SPAN> 
<SPAN ID="label" STYLE="position:absolute; width:23px; height:17px; ¬ 
    z-index:16; left: 44px; top: 5px">Marquee</SPAN> 
 
<!-- If your form fields are in different AP elements, you must ¬ 
    create a separate form inside each AP element and reference it as ¬ 
    shown in the inspectSelection() and setInterjectionTag() functions. --> 
 
<SPAN ID="topLayer" STYLE="position:absolute; z-index:1; left: 125px; ¬ 
    top: 3px; width: 431px; height: 32px"> 
<FORM NAME="topLayerForm"> 
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> 
        <TR> 
            <TD VALIGN="baseline" ALIGN="right">Direction:</TD> 
            <TD VALIGN="baseline" ALIGN="right"> 
            <SELECT NAME="marqDirection" STYLE="width:86" 
                onChange="setMarqueeTag()"> 
                <OPTION VALUE="left">Left</OPTION> 
                <OPTION VALUE="right">Right</OPTION> 
            </SELECT> 
        </TR> 
    </TABLE> 
</FORM> 
</SPAN>

Save the file as marquee.htm in the Configuration/Inspectors folder.

You need to add JavaScript functions to make sure you can inspect the selection, to inspect the selection, and to enter the appropriate values in the Property inspector.

Create a new blank file.
To specify that the Property inspector appears whenever the selection contains the marquee tag, add the following function:
```
 function canInspectSelection(){ 
    return true; 
}
```

To refresh the value of the direction attribute that appears in the text field, add the following function at the end of the file:

 function inspectSelection(){ 
    // Get the DOM of the current document. 
    var theDOM = dw.getDocumentDOM(); 
    // Get the selected node. 
    var theObj = theDOM.getSelectedNode(); 
 
    // Get the value of the DIRECTION attribute on the MARQUEE tag. 
    var theDirection = theObj.getAttribute('direction'); 
 
    // Initialize a variable for the DIRECTION attribute to -1. 
    // This is used to store the menu index that corresponds to 
    // the value of the attribute. 
    // var typeIndex = -1; 
    var directionIndex = -1; 
     
    // If there was a DIRECTION attribute... 
    if (theDirection){ 
        // If the value of DIRECTION is "left", set typeIndex to 0. 
        if (theDirection.toLowerCase() == "left"){ 
            directionIndex = 0; 
        // If the value of DIRECTION is "right", set typeIndex to 1. 
            }else if (theDirection.toLowerCase() == "right"){ 
                directionIndex = 1; 
                } 
            } 
    // If the value of the DIRECTION attribute was "left" 
    // or "right", choose the corresponding 
    // option from the pop-up menu in the interface. 
    if (directionIndex != -1){ 
        document.topLayer.document.topLayerForm.marqDirection.selectedIndex =¬ 
        directionIndex; 
    } 
}

To get the current selection and make the text box in the Property inspector display the direction attribute’s value, add the following function at the end of the file:

 function setMarqueeTag(){ 
    // Get the DOM of the current document. 
    var theDOM = dw.getDocumentDOM(); 
    // Get the selected node. 
    var theObj = theDOM.getSelectedNode(); 
     
    // Get the index of the selected option in the pop-up menu 
    // in the interface. 
    var directionIndex = ¬ 
        document.topLayer.document.topLayerForm.marqDirection.selectedIndex; 
    // Get the value of the selected option in the pop-up menu 
    // in the interface. 
    var theDirection = ¬ 
        document.topLayer.document.topLayerForm.marqDirection.¬ 
        options[directionIndex].value; 
 
    // Set the value of the direction attribute to theDirection. 
    theObj.setAttribute('direction',theDirection); 
}

Save the file as marquee.js in the Configuration/Inspectors folder.

You can optionally create the image that appears in the Property inspector.

Create an image that is 36 pixels wide and 36 pixels high.
Save the image as marquee.gif in Configuration/Inspectors.
In general, you can save images for Property inspectors in any format that Dreamweaver supports.

Finally, you can test the Property inspector.

Restart Dreamweaver.
Create a new HTML page, or open an existing HTML page.
Add the following in the body section of the page:
```
 <MARQUEE></MARQUEE>
```
Highlight the text you just added.
The Property inspector you created for the marquee tag appears.
Enter a value for the direction attribute in the Property inspector.
The tag on your page changes to include the direction attribute and the value you entered in the Property inspector.

Legal Notices | Online Privacy Policy

A simple Property inspector example

Create the user interface

Write the JavaScript code

Create the image

Test the Property inspector

Ask the Community

Contact Us