Depressible Image

Depressible image is a form of interaction in Ajax and JavaScript based application that deals with photos and links. It is a very simple looking interaction wherein the image would pop-up or become smaller whenever the mouse is pointed to the image depending on the preferences of the developer.

Although this looks very simple, the interactivity provided by this function is very impressive. Through depressible image, you’ll be able to increase interaction in your application or even in a simple website.

What is even better is that launching this particular function is very easy. There are simple prerequisites that you have to remember and functions you need to use to enable depressible image in your website.

Loading Images

The function will only work if the file is already loaded in the client side. Calling the photos directly from the server to the client side could take sometime and would just take up unnecessary resources. It will force developers to use more functions just to call a single file.

By loading the file before using the function, the function will only be limited on depressible image. You can launch the photo in the header wherein it will automatically be preloaded in the application.

Using the Function

Once the images have been loaded in the client side, it’s just a matter of executing the function so that it could be effectively launched as a depressible image.

There are only two functions you need to remember in executing depressible image:

• onMousedown ()
• onMouseup ()

You can choose one of those functions to load the image in the client side. For example, you can select onMouseup to launch one image in the browser. You should be able to see the image pop-up because of the attached function added on the image.

More Than an Image

You will notice that the above mentioned functions will launch another function that could control or make some changes in the application. That means the function is not just limited in pop-ups for images.

You can practically add any function that you can think of so that you can effectively launch a function. The options are practically endless.

Basically, the end result of a depressible image would be an image that could be used as a trigger for another function or just a link to other websites.

Text Instead of Images

There is also an option of using text instead of images. Instead of using images, you can use text as a triggering point for your mouse. The advantage of using text instead of images is that you do not need any preloading requirements to load the text.

You can directly link the function to the text. This is highly recommended if you want to save the user precious resources or establishing a very lightweight application.

Depressible image is just a first step for something bigger. By smartly using the function, you should be able to effectively build an application that does not require clicks. By extending the function to text instead of images, the options are almost endless.