Understanding how themes work using the img folder

As explained in the Introduction section of this chapter, there are controls that are themed simply using the images stored in the img folder.

This way is the oldest way to theme a control, and for newer implementations, the preferred way of theming is using CSS, that is, using the theme folder.

Until its update, we could make use of controls that work with any of the two forms of theming, so it is important to know how to theme both.

In this recipe, we are going to describe how to theme the PanZoomBar control that uses the old way based on the images in the img folder.

How to do it...

1. Create an HTML file with OpenLayers dependencies and start adding in the body element of the document, the div element to hold the map:

   <div id="ch06_theming_img" style="width: 100%; height: 90%;"></div>

2. Now, add the following JavaScript code to initialize the map and add a base layer:

       var map = new OpenLayers.Map("ch06_theming_img ");    
       var...