How does it work?

The above picture actually consists of seven parts as shown below:

Each part is arranged in a table so that you can manipulate specific parts. The code is as follows:

Each colored background corresponds to the part of the same color in the above picture. The parts on which you want to manipulate are named as shown below:

As shown in the above coding sheet, they are coded in the following manner:

document.face.src
document.braup.src
document.bradown2.src
document.bradown3.src

The idea is that, when you click the specific part of the picture, the Javascript will replace the related parts with the appropriate segments as shown below:

For the above demo, I use different names (face2 and braup2) because JavaScript does not allow me to use the identical name on the same page.

When you click the bra above, the href= attribute executes three JavaScript statements. The first statement will replace the part called face2 with the picture (ba0104a1.gif) at right.

The second statement will replace the part called braup2 with the picture (ba0104a3.gif) at right.

The third statement actually does nothing, but this statement is required to prevent the following weird event from taking place.

When you click the bra, your browser will display the name of the second picture for replacement on a blank page.

To get back here, please click the back button on your browser.

What the heck happned?

Well, nobody is perfect, and nothing is perfect.
Apparently, JavaScript loaded the name—that is, a string value—instead of its target: the picture itself.

The void() evaluates its parameter and executes it if it is a statement. Alternatively, to prevent the above strange event, you can write it in the following manner:

<a href="javascript:void(document.face3.src=
        '../eroshist/images/ba0104a1.gif');
    void(document.braup3.src=
        '../eroshist/images/ba0104a3.gif')">

When you click the button, the event handler (onClick) will restore the picture. This time, you don’t need void() in the code. Strange, isn’t it?

Related Links

• How to Use a TABLE
  
  
• How to Use an IMG Tag
  
  
• Window Object Basics
  
  
• Javascript Special Characters
  and Alert() Method
  
  
• What is a spacer tag?
  
  
• FORM Tag Made Easy!
  
  
• Have a good time with this Jukebox!
  
  
• How to use an event handler