How to display a control (zoom bar) outside map container in openlayers?

Since I'm new to OpenLayers this question might be the simplest of them all but after a quick search on the subject I couldn't find anything useful, so:

Is it possible to put a OpenLayers zoom bar/slider outside the map container in another div? Like for example OpenLayers.Control.Zoom().

Answer

First, create your map with no controls.

var map = new OpenLayers.Map('map', { controls: [] });

To place the controls outside the map container, create a container

to put it inside.

Then create the controls and place them inside the #external_control container.

var external_control = new OpenLayers.Control.Zoom({
    div: document.getElementById('external_control') });

map.addControl(external_control);

This tutorial might help you. Specifically, the section on "Adding Controls Outside of Map"