Categories


Deconstructing a JAVA Script

In an earlier post we stated that JAVA scripts need a code in the section of the HTML document for the script to work, however, there are some exceptions.

The following JAVA script allows you to enlarge an image within a page by clicking on the small version of the image one time. Best part – you do not need any additional code and this script can be used multiple times on the same page by changing  the image name along with the corresponding sizes of the images (small and large).

For example:Click once on the image to the left to enlarge it;
click twice to return it to original size.

 

Code used to perform the above action is shown in blue.  To use this code you would place it where you want the image to display.

onclick=”this.src=’images/yourpicture.jpg’;this.height=404;this.width=292″

ondblclick=”this.src=’images/yourpicture.jpg’;this.height=150;this.width=108″>

 

Let’s look at this code and see what it means and how it is configured line-by-line.

< – indicates the beginning of the code

img scr=  –  states that this is an image file

“images/yourpicture.jpg” – defines the location and type of file. In this case the image is located in the “images” folder of the root directory and is named “yourpicture” with a file extension of jpg. If your picture were in the root directory and not in a separate folder, then the code would look like “yourpicture.jpg” .  If the image resides in a folder, you must separate the folder from the image name with a forward slash / .

width=”108″ height=”150″  –  defines the size of the small picture, i.e, the one the visitor will see when they first come to the page.

onclick=”this.src=’images/yourpicture.jpg’;this.height=404;this.width=292″

onclick=”this.src=’images/yourpicture.jpg’;  – will cause the large image to display when the visitor clicks once on the small image. It should be noted that the large image and the small image have the same name and location  (images/yourpicture.jpg ).

this.height=404;this.width=292″   –  defines the size of the large picture to display when the visitor clicks one time.

 

ondblclick=”this.src=’images/yourpicture.jpg’;this.height=150;this.width=108″>

ondblclick=”this.src=’images/yourpicture.jpg’;  –   will cause the small image to display when the visitor double clicks on the large image. Again, the image name ( this.scr=’images/yourpicture.jpg’ ; ) is the same name as in the two other lines of code. 

this.height=150;this.width=108″   –   for the large image to return to the small image the size of the small image must be defined again. 

>    –  closes the script.

This script works based on only one (1) image being uploaded per script used . . . the large one. The small image is displayed and defined by stating the size within the script. This size of the small image must be proportional to the large image. (Use your graphics program to determine the correct width and height for each image.)

It should also be noted that if this script is to be used in  Word Press, rather than use the  abbreviated bit of code for the location of the image, i.e.,

“images/yourpicture.jpg” width=”108″ height=”150″

you should use the complete location of the image or the script will not work once the post containing the script is no longer on the main page.  Therefore when using this script in Word Press the code defining the location of the image would look like

http://www.yourdomain.com/images/yourpicture.jpg” width=”108″ height=”150″

This is assuming the Word Press is a stand-alone domain having its own .com, .net, etc. extension.

 

A good source for free JAVA Scripts is The JAVA Script Source.  They offer twenty-four categories covering not only JAVA but also Ajax, HTML, CSS and more. You should be able to find any script you might need there.

 Most of the scripts come with instructions for use – however, in most cases you will need to make modifications to fit your need. This could be as simple as replacing an image file as we’ve shown here or something more complicated requiring you to upload the ‘action’ script along with multiple pictures and modifying text. While it may seem complicated – don’t give up – carefully read the instructions and take time to ‘deconstruct’ the script to be sure all parts of the code correspond as needed and are placed in the appropriate part of the page.

Final Thought

JAVA cannot be previewed like an HTML page. It must be uploaded to the Internet to see if the script is working correctly.

If you find this information helpful, please share it !


Comments are closed.