<html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButton {
position: absolute;
top: 0;
right: 0;
background: red;
width: 22px;
height: 22px;
}
</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;
function buttonClicked()
{
alert ('Button clicked.');
}
function init()
{
map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
map.zoomToMaxExtent();
panel = new OpenLayers.Control.Panel();
map.addControl (panel);
panel.addControls ([new OpenLayers.Control.Button ({autoActivate: true, displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'})]);
//panel.controls[0].activate(); <-- this does not help.
}
</script>
</head>
<body onload="init()">
<div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>