Access Image URL to TextBox. Useful for cases where you want others to be able to copy the image address easily for linking. Tested in IE6.0, Netscape4.08, Netscape7.02, Netscape8.0.4, Opera8.51, Firefox1.0.7 and AOL Explorer1.1

W hen an image is clicked, this script will show the image URL in a textbox. Useful for cases where you want others to be able to copy the image address easily for linking... such as for banners, logo graphics, etc.
A single instance* of the script can be attached to any number of images in the page.

* See bottom of page for this asterick for what part of this script can be placed in as many places as you need this effect to function.

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.51, Netscape4.08 Netscape7.02, Netscape8.0.4 and AOL Explorer1.1. This script worked well in all platforms with one variation observed in Netscape4.08.

1)    The size of the textarea form box does not adhere to the defined size of "60"
2)    <input type="text" size="60" name="Where">
3)    Does not hamper the operations of this script in any way.
4)    This is a normal variation when it comes to Netscape 4.08

D epending on your knowledge of HTML, java scripts and tables, the default* is an easy, three part copy and paste code. The first part goes into the <HEAD> section of your document.
The second part (onLoad event handler) goes directly into the <BODY> tag** and the last part goes into the <BODY> section of your document where you want this effect to appear.

* The default refers to the top three images in a row.

** If you do not know howto add the onLoad event handler directly into the <BODY> tag, see the below example.

<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc" BODY onLoad="isReady=true">

I n the default, in order to use your own images, you need to change the default and add the full path of the uploaded image you want to appear.

I n the default, there are three such places (each in its own table) that you need to put your image path including the height and width. The border=0 denotes no box around the image when it is incorporated into a link. This is just proper HTML coding to include the defined border even when it is set for zero "0".

I f you want to add more than the default number of images and have them as we do, (underneath), here is where your solid working knowledge of tables comes into play. Below we will show you the last or third default image and then howto add the additional tables with the banners included.

Below is where you add the additional tables!

</td>
</tr>
</table>

T he last thing we did was to modify the "Clear" link just right of the form box where the URL appears. The way the default has it set up, when you click "Clear", the page would jump to the top.

Reason Being
The way the code is set up, the clear url is also associated with the"#" character.
<a href="#" onClick="clearAddress()" class="js">
This automatically when activated will take you to the top of the page with a non-smooth transition.
By removing that part of the script and replacing it with a reset form button, it eliminates the rough transition.

T o visualize this and possibly clarify it further, place your cursor on the below word "clear" and the view the progress bar at the bottom of the screen. Notice it shows the URL of this page with the added suffix of "#".

In other words,
https://www.angelfire.com/ny5/consigliere/accessurlforimage.html
Will now be
https://www.angelfire.com/ny5/consigliere/accessurlforimage.html#

T o make this change, this part of the script is located near the bottom of the code. See below.

Default
Try me and see what happens

Clear

<td align="center" valign="top">
<form name="Which">
<input type="text" size="60" name="Where">
</form>
          </td>
          <td align="center" valign="top">
          <font face="Arial" size="1">
<a href="#" onClick="clearAddress()" class="js">
Clear</a></font>
          </td>
          </tr>
          </table>

Reconfigured With Form Button

Type something in the box and then select "Clear"

* Y ou can by the way, once the code is in place use the images code anywhere on the page and it will work. Just paste this part of the code anywhere you want the effect to happen. Just click on the below image and see the smooth transition to the part of the pge where the URL can be viewed.

<img src="Path To Uploaded Image" width="?" height="?"
border="0" onMouseDown="showAddress(this.src)">

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Image URL: