Pop-out Elements: Positioning an Element's Image - Doc JavaScript

Positioning an Element's Image

As you already know, the panel pops out when the user clicks its tab. The tab is actually a simple image. In our example we use two images, columns.gif and examples.gif:

	<IMG SRC="columns.gif" ALT="JavaScript Columns" BORDER="0" HEIGHT="130" WIDTH="18">
	<IMG SRC="examples.gif" ALT="JavaScript Examples" BORDER="0" HEIGHT="130" WIDTH="18">

Now take a look at the makeImage() method that positions the image based on the value of the posY property:

function makeImage(imgURL, imgHeight, imgWidth, imgAlt) {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', this.id, 'img {',
      'position: absolute;',
      'left: 0; top: ', this.posY, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', this.id, 'img">',
    '<A HREF="javascript:', this.id, '.showElement()">',
    '<IMG SRC="', imgURL, '" ALT="', imgAlt, '" BORDER="0" ',
    'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
    '</A></DIV>'
  );
}

This function is composed of one statement, document.write(). The comma operator (,) is utilized to include literal strings and variables in one statement. It forces the document.write() method to print several arguments rather than one. Unlike the concatenation operator (+), the comma does not attach the strings and variables before handing them to the function. But since document.write() accepts multiple arguments, both operators may be used. The comma is more efficient in this case.

Before we analyze the makeImage() method, please take a look at the statements that invoke it:

menu1 = new popout('menu1', 300, 90);
menu1.makeImage('columns.gif', 130, 18,
                'JavaScript Columns');
menu2 = new popout('menu2', 440, 200);
menu2.makeImage('examples.gif', 130, 18, 
                'JavaScript Examples');

The method refers to its parameters and the object's existing properties. Let's take a look at the first call (the second statement in the preceding script segment). Here's a listing of the properties and parameters, along with their values, as printed by the document.write() method:

• menu1.id -- "menu1"
• menu1.posY -- 300
• imgURL -- "examples.gif"
• imgHeight -- 130
• imgWidth -- 18
• imgAlt -- "JavaScript Columns"

For these values, the method prints the following HTML code:

<STYLE TYPE="text/css">#menu1img {position: absolute;left: 0; top: 300;width: 18;z-index: 1}</STYLE><DIV ID="menu1img"><A HREF="javascript:menu1.showElement()"><IMG SRC="columns.gif" ALT="JavaScript Columns" BORDER="0" HEIGHT="130" WIDTH="18"></A></DIV>

The code doesn't have any carriage returns, so it is actually one line. We'll split it up for your convenience:

<STYLE TYPE="text/css">
#menu1img {
  position: absolute;
  left: 0;
  top: 300;
  width: 18;
  z-index: 1
}
</STYLE>
<DIV ID="menu1img">
  <A HREF="javascript:menu1.showElement()">
    <IMG SRC="columns.gif" ALT="JavaScript Columns"
         BORDER="0" HEIGHT="130" WIDTH="18">
  </A>
</DIV>

This example demonstrates the functionality of the makeImage() method. Notice that the DIV element's ID attribute has a value of menu1img. That is, it appends the "img" substring to the the variable's name (which is equivalent to the object's id property). Also notice that when the user clicks the image, the object's showElement() method is invoked to show or hide the element.

The tab element's position is set to absolute, so the element is positioned in relation to the web page. In the preceding example, the tab element is placed against the left side of the page, 300 pixels from the top.

Note that width reflects the width of the tab element. It has no connection with the object's width property, which holds the width of the element's box. The image's width is simply handed to the makeImage() method, and is not stored in any form. The tab element's z-index property is equivalent to the box element's one. It is explained in the next section of the column.

It may seem strange that we are printing a separate style sheet for each image. When we first wrote the script, makeImage() was much shorter:

function makeImage(imgURL, imgHeight, imgWidth, imgAlt) {
  document.write(
    '<DIV ID="', this.id, 'img" STYLE="position: absolute; ',
    'left: 0; top: ', imgY, '; width: ', imgWidth, '; z-index: 1">',
    '<A HREF="javascript:', this.id, '.showElement()">',
    '<IMG SRC="', imgURL, '" ALT="', imgAlt, '" BORDER="0" ',
    'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
    '</A></DIV>'
  );
}

In this version of the function, the tab element's style properties are defined via the STYLE attribute of the DIV element. However, Navigator 4.0x doesn't parse the STYLE attribute properly when the element is dynamically printed with a document.write() statement, due to an undocumented bug. The same HTML definition, when placed directly in the document (rather than using a script to print it), works fine on both Navigator 4.0x and Internet Explorer 4.0x.

Created: February 24, 1998
Revised: February 24, 1998

URL: https://www.webreference.com/js/column14/image.html