Javascript Click to Enlarge - January - 20 - 2007

SRD

Javascript Click to Enlarge

The javascript click to enlarge image feature is simple to implement on a website and adds a fun component to sites featuring many images. This allows the user a little bit more control over their experience. To add the javascript click to enlarge, add the code to do the enlargement, code to reduce, and add tags to the images to make it function.

Adding the javascript click to enlarge function to the head of your html document.

<!-- Begin
function enlargeImage1()
{
image1.height="300";
image1.width="300";
}

function dropImage1()
{
image1.height="110";
image1.width="110";
}
// End -->
</script>

This is the script for the enlarge and drop image feature in an html document. Your html page should have a head section before the body identifying the title, description, and other features of the page. Between the <head> and </head> tags place the above script. “enlargeImage1()” is a function to take an image named “image1” and make the dimensions 300 X 300. The “dropImage1()” function reduces the image size back to 110 X 110. These dimensions can be adjusted.

Now we need an image. Place an image somewhere in the body of your document to add the javascript click to enlarge feature to. The image tag should look like this:

This tag means that an image (img) located at (src) “img/10.jpg” with alternate text (alt) “My Image” named “image1” for the function above that starts at width 110 and height 110 will respond to the commands “onclick” and “ondblclick.” If the user clicks the image twice (ondblclick) the “enlargeImage1()” function will be called and will increase the image size to 300 X 300. When a user clicks the image once (onclick) the “dropImage1()” function will reduce the image back to the original 110 X 110 sizing.

The javascript click to enlarge feature is simple and fun to implement and use. This will provide a very basic way to add a bit of interactivity to your site.