Clicker Click Image To Close Window Close Window

T his is a little unknown trick to close a window that is unlike the normal "Close Window button" or "Close Window Text" link. It is the same little snipplet of javascript as the Close Window text link but without the text and is attached to an image. This is a unique way if you have a whole bunch of thumbnail pictures that when clicked, open to a full size in a new window to close the full size picture. If you grab the below link, it will open in a new window with an image on it. Just click the image to see what happens.
Click Me ]

We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

T he below code is how to include a "Close Window" option within a graphic.

<a href="javascript: window.close()"><img src="Path To Uploaded Image" width="?" height="?" border="0" title="Click image to close this window"></a>

A ll we actually did was to put the text "Close Window" link together with a graphic and replaced the attribute of alt=" " with that of title=" ". We did remove the text itself and close the link* without any text </a>. Lets now define all the attributes that are associated with the graphic.

*     When you close the link with the </a>, it is after the image. The close window javascript "Must" be positioned in front of the image or it will not work.
  • width="?" This is the width of the uploaded graphic that you are calling.
  • height="?" This is the height of the uploaded image that you are calling.
  • border="0" The zero (0) denote no border around the image link. A number of one (1) or greater will make a border. The higher the number, the wider the border.
  • title="?" When you place your cursor over the image, the text you insert here will be seen.

    This Has A Border Of 0  This Has A Defined Border Of ' 2 '

L et us go one step further and break it down one more step.

Close Window Text Javascript:
<a href="javascript: window.close()">Close Window*</a>

Image code:
<img src="Path To Uploaded Image" width="?" height="?" border="0" title="Click image to close this window">

*     The words for this effect must be removed and you treat it just like a regular image link. So now lets put it all together again and see what we have.

<a href="javascript: window.close()"><img src="Path To Uploaded Image" width="?" height="?" border="0" title="Click image to close this window"></a>

Note Of Importance Note of Importance ~ in reference to the positioning of the image code and the close window javascript. Do not place the close window javascript "After" the image code or it will "Not work. The close window javascript must be "Before" the image code. You close the link (</a>) after the image code.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-