Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Potential Extension: Adding Attributes to the Template

Big applications can always be made bigger. This section is devoted to showing you how to add attributes to the image template, giving you greater control over the generated code. For the sake of simplicity, I’ll show you how to add the IMG attributes HSPACE and VSPACE. The procedure involves these six steps:

Add the new fields in the default template.
Create an array for its values in setArrays().
Capture the new default values.
Add text fields in the image template in generateEntryForm().
Reference and assign the new attribute values in genJavaScript().
Generate the HTML required to display the attributes in genJavaScript().

JavaScript Technique: String Replacement with JavaScript 1.1 and 1.2

JavaScript 1.2 brought with it many cool new features. One of those is the ability to use regular expressions for string matching and replacing. Functions pathPrep() and purify() perform a simple but powerful method of replacing, using JavaScript 1.2. This is a great for JavaScript 1.2 capable browsers, but Netscape 3.x is still used in significant numbers. Here is a function that performs string replacement in JavaScript 1.1 using methods of the Array object:

function replacev11(str, oldSubStr, newSubStr) {
  var newStr = str.split(oldSubStr).join(newSubStr);
  return newStr;
  }

This function takes a string, creates an array of elements split() according to the substring you want to remove (oldSubStr), then returns a string made by using join() to hook up the array with the new substring (newSubStr). Not pretty, but it works.

Step 1: Adding the Fields

<TD VALIGN="TOP">
<FONT FACE="Arial" SIZE=2>
HSpace
</TD>
<TD VALIGN="TOP">
<FONT FACE="Arial" SIZE=2>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
genSelect("hspace", 25, 0, 0);
//-->
</SCRIPT>
</TD>
<TD VALIGN="TOP">
<FONT FACE="Arial" SIZE=2>
VSpace
</TD>
<TD VALIGN="TOP">
<FONT FACE="Arial" SIZE=2>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
genSelect("vspace", 25, 0, 0);
//-->
</SCRIPT>
</TD>

Step 2: Creating Arrays in setArrays( )

function setArrays() {
  imgPrim = new Array();
  imgRoll = new Array();
  imgDown = new Array();
  imgLink = new Array();
  imgText = new Array();
  imgWdh  = new Array();
  imgHgt  = new Array();
  imgBdr  = new Array();
  imgHSpace  = new Array();  // For the HSPACE
  imgVSpace  = new Array();  // For the VSPACE
  }

That makes room to store the new default values. That brings us to the next step—filling those new arrays.

Step 3: Capturing the New Default Values

In captureDefaultProfile(), we will add two local variables named imgHspace and imgVspace, then assign their values to the values chosen in the default template. Now captureDefaultProfile() looks like this:

function captureDefaultProfile(formObj) {
  setArrays();
  imgDefaults    = formObj;
  var imgQty      = (imgDefaults.imgnumber.selectedIndex + 1);
  var imgHeight   = (imgDefaults.pxlheight.selectedIndex);
  var imgWidth    = (imgDefaults.pxlwidth.selectedIndex);
  var imgBorder   = (imgDefaults.defbdr.selectedIndex);
  var imgHspace   = (imgDefaults.hspace.selectedIndex);
  var imgVspace   = (imgDefaults.vspace.selectedIndex);
  for (var i = 0; i < imgQty; i++) {
    imgPrim[i] = "";
    imgRoll[i] = "";
    imgDown[i] = "";
    imgLink[i] = "";
    imgText[i] = "";
    imgWdh[i]  = imgWidth;
    imgHgt[i]  = imgHeight;
    imgBdr[i]  = imgBorder;
    imgHSpace[i] = imgHspace;  // For HSPACE
    imgVSpace[i] = imgVspace;  // For VSPACE
    }
  generateEntryForm();
  }

ImageMachine will now be able to include the default values for HSPACE and VSPACE in the image template.

Step 4: Adding Text Fields in generateEntryForm( )

Now you can add the strings of HTML in generateEntryForm() to accommodate the two new text fields. Let’s put them in their own TR under all the others. You can adjust it later to make it look better. Lines 103-106 currently look like this:

"<TR><TD VALIGN=BOTTOM COLSPAN=" +
(!imgDefaults.mousedown.checked ? "3" : "4") +
"><BR><HR NOSHADE><BR></TD></TR>");

Adding the two text fields to the end looks like this:

"<TR><TD VALIGN=BOTTOM><INPUT TYPE=TEXT NAME='hsp " + i +
"' VALUE=&INPUT TYPE=TEXT NAME='vsp" + i +
"' VALUE='" + imgVspace[i] + "' SIZE=3> VSPACE </TD></TR>" +
"<TR><TD VALIGN=BOTTOM COLSPAN=" +
(!imgDefaults.mousedown.checked ? "3" : "4") + ">" +
"<BR><HR NOSHADE><BR></TD></TR>");

This code adds two extra text fields for every image group and displays the default value in each. The user can change this later, just like the others.

Step 5: Referencing and Assigning the New Values in genJavaScript( )

Once the user chooses to generate the code, ImageMachine needs to grab the information from the new text fields in the image template. Just add the code in lines 158-169, which now looks like this:

for (var i = 0; i < (imgDefaults.imgnumber.selectedIndex + 1); i++) {
  imgPrim[i] = purify(imgTemplate['prim' + i].value);
  imgRoll[i] = purify(imgTemplate['seci' + i].value);
  if (imgDefaults.mousedown.checked) {
    imgDown[i] = purify(imgTemplate['down' + i].value);
    }
  imgLink[i] = purify(imgTemplate['href' + i].value);
  imgText[i] = purify(imgTemplate['stat' + i].value);
  imgWdh[i]  = purify(imgTemplate['wdh' + i].value);
  imgHgt[i]  = purify(imgTemplate['hgt' + i].value);
  imgBdr[i]  = purify(imgTemplate['bdr' + i].value);
  imgHSpace[i]  = purify(imgTemplate['hsp' + i].value);
  imgVSpace[i]  = purify(imgTemplate['vsp' + i].value);
  }

The last two lines in the block show ImageMachine assigning the form values from the image template to elements in imgHSpaceand imgVSpace. We’re almost there. The only thing left is to make sure the new attributes are included in the code generation, printed or interpreted.

Step 6: Generating the Additional HTML in genJavaScript( )

The new code will be added to the variable imageLinks. The last few lines of the string are as follows:

(HTML ? fontClose : "") + br + nbsp + "HEIGHT=" +
(HTML ? fontOpen : "") + imgHgt[j] +
(HTML ? fontClose : "") + br + nbsp + "BORDER=" +
(HTML ? fontOpen : "") + imgBdr[j] +
(HTML ? fontClose : "") +
gt + "" + lt + "/A" + gt + br + br + br;

All you need to do is copy a few lines, and change HEIGHT to HSPACE , imgHgt to imgHSpace , BORDER to VSPACE , and imgBdr to imgVSpace . Here is the new version:

(HTML ? fontClose : "") + br + nbsp + "HEIGHT=" +
(HTML ? fontOpen : "") + imgHgt[j] +
(HTML ? fontClose : "") + br + nbsp + "BORDER=" +
(HTML ? fontOpen : "") + imgBdr[j] +
(HTML ? fontClose : "") + br + nbsp + "HSPACE=" +
(HTML ? fontOpen : "") + imgHSpace[j] +
(HTML ? fontClose : "") + br + nbsp + "VSPACE=" +
(HTML ? fontOpen : "") + imgVSpace[j] +
(HTML ? fontClose : "") + 
gt + "" + lt + "/A" + gt + br + br + br;

That adds two new attributes for your images. You might also consider adding an ALT tag for image content. There’s no need to limit this type of modification to the IMG tag. There is plenty to do in the <A> tag; you can customize it for image maps, and so on.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Potential Extension: Adding Attributes to the Template

Create new playlist

Sign In

Sign Up