ARTICLES & TUTORIALS FOR IMAGES & PICTURES in JAVASCRIPT: Learn about Interacting with Pictures & Images in Javascript, including image objects, Image Maps, Linking Images, Random Images, Image Animations, Text Slide Shows, Rollovers, and more.
JavaScript Image Object
In this tutorial you learn JavaScript Image Object…
Javascript Image Object
In this article we'll show you how to use the Image object and show you a few things that you can do with it.
JavaScript Image Maps
An image-map is an image with clickable regions.
Image map with added JavaScript
Example of Image map with added JavaScript.
Display a Random Image
Use the following code in the head of your Web page to create a random number…
JavaScript: Preloading Images
Preloading images is a technique often used in Rollover Effects or other image scripts which work more quickly when the images for them are loaded as soon as possible.
Multiple Image Animation
A script that allows you to display what appears to be a single image animation using 5 different images. The images in the animation will need to be all the same size. The animation repeats indefinitely.
Image/Text Slide Show
This script will allow you to display an image slide show from a set of 5 images, with a description below each image. The script shows a new image every 8 seconds, and ends by displaying the first image with the caption "The End".
Image/Text Slide Show 2
This script will allow you to display an image slide show from a set of 5 images, with a description below each image. The script shows a new image every 8 seconds, and then keeps repeating the show.
Image Rollover
This script will create linked images which will change when the mouse passes over them. The script is set up for two image flips, but more can be added by editing the code.
Image Change: Button Click
This script lets you display one image, but have it change 4 more times by having the viewer click a button. Can be used as a user controlled slide show, or just to change an image with a button.
Random Banner Display
This script will allow you to display a random banner from a set of 5. Each banner will be linked to a url of your choice, so this can be used for a random banner ad rotation. You have some display options such as border size, centering, and the banner si
Random Image Display
This script will allow you to display a random image from a set of 5. You have some display options such as border size, centering, and the image size (All images in the set must be the same size, though).
Easy Image Tricks
Have you ever wanted to have an image change to another image when you move your mouse pointer over it, and change back once you move your mouse pointer off it? This can be accomplished rather easily with JavaScript.
A slide show with JavaScript
Have a click-around with the previous and next buttons in the slide show below and see what happens. Then click the check box and wait to see what happens then.
A new image every time you visit the page
Try reloading this page and see what happens to the image below. The more images you have in your ARRAY the more likely a different image will load…
Menu with Descriptions, using images
While this example talks about descriptions for the items in a menu, it is equally about loading images and changing images in a page. For example, when an item is selected in the menu, an image (showing a description of the item) appears on the right of
Image Rollover Script
This script makes an image change when the mouse is placed over the image.
Slide Show Script
This script allows you to display a "Slide Show" where the surfer can change the images on a page automatically.
Random Image Script
This script displays a random image. Instead of getting the time and displaying an image based on that, it truly is a mathematical random script.
Automatically Changing Slide Show Script
This script is similar to the Slide Show Script, but it automatically changes the image for the user.
Fading Image Script
This script makes an image fade in and fade out when the mouse is over it. It is similar to a regular rollover, but it only requires one image.
Preloading images
JavaScript animation works by substituting one image with another. The new image should be ready to replace the original image as quickly as possible. For this to happen the image must already be loaded into the computer's memory (also known as cache). If
Image Flip Using OnMouseOver
This example introduces you to advanced uses of onMouseOver and onMouseOut events. Remember that with object-oriented or object-based programming, an event triggers a function or JavaScript statement to run.
Image Flip With A Function
Here is another example of onMouseOver and onMouseOut. This time, instead of including the JavaScript statement to swap pictures in the tag, the onMouseOver, onMouseOut event calls a function.
Producing Random Statements and Images
Before we go on to a new topic, let's look at one more example of IF. It's important to feel very comfortable with this branching technique which lets you create more creative and more interactive programs.
Putting it all together: A Side Show
This example displays a slide show. The user clicks a link to display the next slide.
JavaScript Image Preloader
One of JavaScript’s greatest strengths is the generation of HTML code on the fly, enabling all kinds of effects not possible with HTML alone. One of the hurdles to overcome when generating HTML is to ensure that any images referenced using tags...
Animated Buttons
Below is an example of a button that is animated using javascript technique…
Animated Buttons: THE TECHNIQUE
We place the button on the page as we would have placed any other image on a webpage. Then we add an onMouseOver event to the image.
Animated Buttons: THE CODE
Before you can add an animated button to your page you need to add the button image itself. After adding the button image to the webpage you need to add a few comments to the image tag...
Banner Ad Rotator
Display two or more rotating banners (480 x 60) in an infinite loop. Banners also link to advertised URLs.
Resolution Image
(Version 4.0+ Browsers) Loads an image with different dimensions based on the users screen resolution setting. Higher resolution browsers see an image with increased dimensions and lower resolution browsers see an image with decreased dimensions…
Automatic Image Resizer
This script will resize a group of images to a preset maximum width. Useful for regulating picture size, especially on sites where images are posted at random by multiple users.
Basic Slideshow
This slideshow allows you to browse through the images manually or automatically. Easily customize this slideshow to fit your site!
Change Image
It's always neat to dynamically change an image when the user touches it. For this example, I have one image and when you put your cursor on it, it changes to another. If you use this script, be sure to use images of the same size!
Change Multiple Images
Dynamically change multiple images by simply moving your mouse over one image.
Change Two Images
Changes two images simultaneously when the user puts their cursor on the link. The necesary images are preloaded to ensure there is no delay when showing the images.
Enlarge Image
No need to become bored to death while waiting for an image to load. Just try this one for the image to enlarge within a fraction of a second.
Image Cycler
Cycle through a group of images in a single location on your page. For best results all images should be near each other in size. You set the time interval for the change of images.
Image Fader Transition
This script uses an opacity filter to make a fading effect transition between two images. Works with IE5+ and NS6+.
Image Previewer
Users can see a preview of the image they select from the pulldown menu before loading the full image….
Image Resizer : Drag and Drop
Resize any image by clicking the image and dragging it to the desired size.
Image Slideshow
Displays a series of images in an automated slide show, a pulldown menu, or the various slideshow controls that are included, such as previous and next.
Image Swap
Swap images using this short, sweet, and easy to edit script! The images are swapped using a MouseOver technique.
Image Swap and Preload
This script is an array of image URLs that uses a for..next loop to preload images, and a simple object structure to change another image's SouRCe (src) property. Images used…
Image Viewer
Use this script to display different images without opening a new window. Click the links to change the displayed image right in the current page.
Instant Image Zooming
This easy zoom-in/zoom-out script can be attached to any image in your page. The image size will toggle between two sizes you set whenever the image is clicked. The function can be attached to as many images in the page as you wish.
JavaScript Image Slider
JavaScript Image Slider is a simple webpage image slider that will display your images automatically whenever you click on the 'Start Show' button and stop the slide show whenever you click on the 'Stop Show' button. There is a text box for entering the d
Photo Album Viewer
A clean and simple photo album viewer with Next and Back buttons for browsing through images.
Photo Album Script Generator
This program automatically generates HTML codes for a customized photo gallery. HTML developers, who do not have much time to write codes or want to use a simple personal photo gallery, can use it…
Preload Images
Ever wanted to get rid of the delay that happens when users put their cursor on a image while the 'onmouseover' image loads? Use JavaScript to preload your 'onmouseover' images and the delay is gone! Useful!
Random Click Image
Displays a random image when the page is loaded and each time the image is clicked.
Random Image
Use this script to randomly display a different image each time the page is visited. Refresh this page and notice the image below will change. Any number of images can be used, and set-up is very easy.
Random Image
Use this script to randomly display a different image each time the page is visited. Refresh this page and notice the image below will change. Any number of images can be used, and set-up is very easy.
Random Image Rotator
Rotates a series of images on the page every few seconds. The images can easily be changed, and the script can be modified to rotate the images randomly or in order.
Rotating Banner
This script randomly displays images, links, or text every time the page is reloaded. (Because it is random, it may reload the same image, link, or text.)
Set Image
Set an image on the page when the cursor is over the link. The image remains set until the user puts their cursor on another link (i.e. no onMouseOut command). Then, the image is updated to the new one.
Textarea with BG Image
Need a quick, easy way to add an image to the background of a textarea? This script is a great way to dress up the bland textareas on your page. Add any image you choose.
Thumbnail
A very simple, one line image enlarger.
Image Swapping
One of the most commonly used features of JavaScript is the ability to change images on a mouseover. Unfortunately, Microsoft Internet Explorer 3.0 does not support image replacement…
Image Rollovers
An image rollover is basically two different images. One is displayed after the page loaded up, the other one is displayed only when the user moves his mouse over the first one.
Changing Images on Mouseover Using JavaScript
The onmouseover event handler is used for generating various kinds of interactivity on web pages. It's most often used for image rollovers. Image change on mouse over is actually quite simple once we understand the logic…
Image Change Using Functions
The main use of function is to prevent us from writing the same code again and again because we can call the same function with a different set of parameters.
Moving an image
The script animates the image by moving it from its initial location to the specified location.
Looping animation
The script demonstrates how to create looping animations…
Blending images
Blending one image into another produces an efficient transition effect.
The Image-object
Now we are going to have a look at the Image-object which is available since JavaScript 1.1 (i.e. since Netscape Navigator 3.0). With the help of the Image-object you can change images on a web-page…
Changing image opacity
This modern and professional looking effect can be seen on many designer homepages.
Basic Image Rollovers
A rollover refers to an image or some other feature on a page changing when you move the mouse over it…
Image Object
Images on the page are represented by the Image object in JavaScript. They can be accessed using the syntax…
Taking rollover images one step further
Rollover images are great, but they are what is considered now to be outdated technology. Using JavaScript1.2, we can make any image appear depressed when someone holds down the mouse button…
Creating an image slide show
Learn how to create a basic slide show…
Creating an image slide show
Learn how to create a clickable slide show...
