Click to see

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


Manipulating Images in JavaScript

In the first tutorial on manipulating of images in JavaScript, the lesson concentrated on simple rollover and direct writing techniques to change your Web page's images. These techniques are useful for banner ads or expanded help. The next series of methods use pop-ups and

Creating an Image in a Popup Window

Pros: Fairly simple code
Cons: Many browsers intervene with popups

   
Salsa on St.Clair in Toronto
Mouse over to see the enlarged images.

This routine creates a new windows and then writes the image into that window. However, I find problems with a routine that a few years ago was perfectly adequate. The problems are popup blockers which can prevent the Window from popping up unless you give it "Permisso" (and in offline mode that can be impossible with Firefox 3 and Safari). Also there are many variations among the browsers on the window.open() call such that the display results are quite mixed. So lets see if we can find an alternative that uses CSS primarily.

An OnClick() Method for Revealing a Hidden Image
Pros: allows other HTML code to be included; hidden image is pre-loaded
Cons: Cannot place the image anywhere on screen


Here is a method of image expansion or zoom that allows the user to include other HTML with the image. In effect we hide a <div> block and then make it visible when clicking on a thumbnail. The image appears below and displaces the HTML underneath it,

Click the Pic at least twice to see the change in image display.
Also note that you can align left to pack in data around the thumbnail and this will not be disturbed. Meanwhile the hidden HTML with the enlarged image and extra HTML does not effect the flow to the next topic - our second sample below.


This next picture we shall try to place higher on the screen:

The advantage of the CSS based method is that the display of the hidden image is much more predictable. Also the HTML is simple as seen below where two spans are used. The first <span> defines the visible image and any other HTML desired. In turn, the visible image contains an onclick= method which invokes the toggleHidden() JavaScript function which will display the hidden image. The second <span> with id="moveupblock" contains the hidden HTML including the enlarged image and other styling desired. Note the second <span> has display:none which makes everything inside the second span invisible. Clicking first time on the thumbnail causes the expanded image+HTML to be displayed by changing the second <span> to display: block. Clicking on the enlarged image the second time hides the enlarged image and any accompanying HTML. And so clicking toggles the images' styling states.

<span id="baseblock" style="display:block">
 <img onclick="JavaScript:toggleHidden('moveupblock', 'baseblock');"   src="images/jsimgwing.jpg" width=150 />
</span>
<span id="moveupblock" style="position: relative; top: -350px; left: 20px;   display:none">
  <img onclick="JavaScript:toggleHidden('moveupblock', 'baseblock');"   src="images/jsimgwing.jpg" /><br />
  This is from the HarbourFront Pond
</span>

and here is the enabling JavaScript code toggleHidden():

<script language="JavaScript" type="text/JavaScript">
function toggleHidden(anID, callingElement) {
  el = document.getElementById(anID);
  if (el != null) {
    if (el.style.display == "none") {
      el.style.display = "block";
    }
    else {
      el.style.display = "none";
      callEl = document.getElementById(callingElement);
      if (callEl != null) { callEl.scrollIntoView(); }
    }
  }
}
</script>
Notice another couple of features. First, the span for the hidden image can contain additional HTML which is also hidden and then revealed when the base image is clicked. Second, an onclick=toggleHidden() is also placed in the hidden image - so clicking on it closes/hides the image and its enclosed span HTML - in this case the phrase "This is from the HarbourFront pond". However, note that in moving the image up using the position:relative ... styling, the HTML below becomes boloxed. Anybody having a solution will have that featured here. So far I have not been able to find a way to position the HTML without effecting the underlying page.

In the next tutorial a multi-image hints/tooltips which is more complicated in implementation but delivers better positioning control. Also there are scrolling tools that allow multiple images to be projected. So see the upcoming multi-image tutorial for your options here.

Summary

This second set of single image manipulations have the virtues of being fairly simple JavaScript+CSS code. But the latest two methods have some drawbacks as well. Showing an enlarged image in a popup window has all the power of the user being able to move and manipulate the popup while the developer can add as much HTML as desired (it gets a little messy because the concatenated strings required). But the biggest drawback is that most browsers now prevent popups and so users must ask for permission to see the popup they have already clicked on.

The second method, Revealing a Hidden image+HTML, works without browser interference, but it has positioning problems. There are solutions to these restriction, but the JavaScripting becomes decidedly more advanced. Not rocket science by any means but still developers have to be more careful because of the possibilities for coding errors.