Using OpenLayers with an Image File

<!-- div to display map --> <div id = "map" class = "map"></div> <!-- Load OpenLayers JavaScript library --> <script src = "OpenLayers.js" type = "text/javascript"></script> <!-- JavaScript to create & show the map --> <script type = "text/javascript"> //Create map variable - this is the entire map, which can have multiple layers var map = new OpenLayers.Map ("map") //Create bounds & size objects. These are part of the definition of the image layer //The simplest option is to set the first two parameters for bounds to 0, //and the second two to the width & height of the image in pixels bounds = new OpenLayers.Bounds (0, 0, 416, 496) //Simply set the size option to the width & height of the image in pixels size = new OpenLayers.Size (416, 496) //Create the image layer var img = new OpenLayers.Layer.Image ("Isle of Man", "map.png", bounds, size) //Add the image layer to the map map.addLayer (img) //Set the initial zoom level map.zoomToMaxExtent () </script>