Search within TutorialsPark

Javascript Images


Using JavaScript to add Dynamic features to Images


Javascript Images: Replacing Images Dynamically using attribute src

Using JavaScript we can replace one Image with another dynamically, this is done by changing the value of the image attribute src.

The process involves, creating an Array to hold images , the src attribute is assigned any one of the images from the array.

Example: JavaScript Images: Replacing Images Dynamically

Give it a TRY! »


Javascript Images : Replacing Images based on User Input

The demo below is another version of the previous example, it replaces images based on User Input.

Example: JavaScript Images: based on user Input.

Give it a TRY! » Note: The function ensures that only alphabetic charcters(not case sensitive) are validated.


Javascript Images : Preloading Images

There is always some delay involved while downloading images from the server, and on slow networks the delay is even more prominent

This issue can be resolved by using an Image() Constructor, which enables you to preload images, and put in browser's cache before it is put to use. This caching technique vastly improves the response time.

Even the size of the cached image(width and height) can be set, but the Image() constructor must be kept in the head element only.

Example: Javascript Images: Preloading Images

Example: Javascript Images: Preloading Images for Rollover Image

Give it a TRY! » Note: It checks just for a basic symbol of @ and ..


Javascript Images: Display Images Randomly

Images can be displayed randomly using Math Object random(), the attribute src gets images at random using this method.

Example: Javascript Images: Display Images Randomly

Give it a TRY! » Note:Enter a value for password less than 8 characters to see the effects.