Click to see

Home Tutorials JavaScript Links
Keep an Open Eye ThePhotoFinishes Takethe5th PixofCanada Pix of Toronto Bookraft


Manipulating Images in JavaScript

One of the original attractions of JavaScript was its ability to manipulate quickly various forms, table contents but most especially images. Hence as JavaScript has matured, its image manipulation capabilities have matured as well. So the idea here is to summarize some of the different image manipulation capabilities in JavaScript with an eye to speed, simplicity and ease of use.

First, the code used is kept as close as possible to the images. So if you do a View | Page Source the listing should find the JavaScript code next to the images being manipulated. Second, the code has been tested in the 5 principal browsers: Firefox 3, IE8, and Opera 9.5, and Safari 2. We recommend Firefox 3 for its much improved speed, stability and wide range of extensions/add-ons.


MouseOver Image Replacement
Pros: Very simple coding, hover triggers replacement
Cons: Some pitfalls to watch out for
`

One of the most common needs for JavaScript is to do a replacement of one image by an identically sized other - the classic before and after demo. The three examples below show 1)two identically sized images, 2)then one big image replaced by smaller image and finally 3)a small image replaced by a bigger one. The second approach has its problems and is shown to demo what can go wrong. Drag your mouse over the icons below to see the rollover effect.

Identically equal-sized images:


Big image by smaller(drag mouse all over image to see effect):



Small by bigger:


Note the code is very simple using only onmouseover and onmouseout calls directly inside the <img> tag:

<img name="iconic" src="images/caeico.gif"
onmouseover="document.iconic.src='images/caeicon.gif';" onmouseout="document.iconic.src='images/caeico.gif';" />

The rollover is simple. An onmouseover replaces the first image with a second one; then when the users mouse goes out of the image area, the onmouseout replaces the new image with the original image. Note the width and height of the two images are identically the same for the easiest effect. "Page wagging" occurs whenever the images are of different size. But when you replace a small image with a lot bigger one(our third example above), the page wagging effect is much less objectionable - particularly if the hidden image is helpful.

You can control this wagging by having the images different on one dimension - preferably the height. Finally, note that each <img> tag has been given a unique name (name="iconic") which simplifies the JavaScript DOM reference (document.iconic.src=).

The other problem - even this minimalist JavaScripting is forbidden in major CMS systems like Drupal and WordPress. I will be testing for eCommerce, Gallery and Joomla. One can see why that might be so - Trojans and other malevolent viruses can be hidden in even the tiniest of JavaScripts. See our comments on the severe limits to software development represented by malevolent/rogue code here.

Random Image on Load
Pros: Again, simple coding
Cons: None significant


The next most common JavaScript image routine placing one of several different images on initial load of a page. The idea is to provide variety of looks/images for return visitors. The classic example is the need on a travel or merchant site to show a different photo of the game or view of the travel destination. As we shall see in a special tutorial there are multi-image scrollers that do this specific tasks. meanwhile, there are several ways to get a randomly chosen image on screen; so two variations on a common method are shown.

See the different images by hitting your browser's reload button several times.


Here is the code for the in-page loading of the data:
The second method uses onload= Javascript command.

<script>var num = Math.floor(Math.random()*7)+ 2;
  var stringer = "<img src='images/opensourcery"+num +".gif'>";
  document.write( stringer);
</script>

Note that the code is longer because a random number between 2 and 8 is being created => Math.floor(Math.random()*7)+ 2; Then the string variable is concatenated to the HTML <img> tag with a value between opensourcery2.gif through opensourcery8.gif. The key code is document.write(stringer); - this writes the HTML right a this place as the page is created. So this JavaScript is the equivalent of having an <img> tag with a random number generated in it.

As you can see the code is fairly simple and using a <table> or <div> tag allows users to position the image precisely on screen. For one website, this is just the code used to feature items for sale each day. It has helped increase sales by over 10% since it was introduced.

Summary

Image rollovers are not just for menus and buttons, but are an important part of websites in general. In this tutorial we have shown two small but effective methods that can be used everywhere from banner ads to special headers or expandable documentation. Quick, nifty and convenient - one of JavaScript's original attractions.