To listen for non-OpenLayers events, follow the next steps:

We have created six buttons, identified from f0 to f5, and we want to create six features that represent them. To do this, in the for loop, first we create a string with an identifier:

var id = "f"+i;

Then, register an event listener function for the mouseover and mouse out events:

OpenLayers.Event.observe(OpenLayers.Util.getElement(id), 'mouseover', mouseOverListener);
OpenLayers.Event.observe(OpenLayers.Util.getElement(id), 'mouseout', mouseOutListener);

This is done by using the OpenLayers.Event.observe method, which requires three parameters. These parameters are as follows:

Because we need to pass the DOM element reference, we need to get it first. To get an element reference when its identifier is available, we can use the helper method OpenLayers.Util.getElement.

From the elementParam definition, you can see that the use of OpenLayers.Util.getElement is not strictly necessary. If we pass an ID, the OpenLayers.Event.observe method will internally use the OpenLayers.Util.getElement function to get the element reference, so the next two lines will have the same result:

        OpenLayers.Event.observe(id, 'mouseover', mouseOverListener);
        OpenLayers.Event.observe(OpenLayers.Util.getElement(id), 'mouseover', mouseOverListener);

Once the listeners are registered, we create a random point feature and add it to the vector layer:

var px = Math.random()*360-180;
var py = Math.random()*160-80;
var pointGeometry = new OpenLayers.Geometry.Point(px, py);

Remember to transform the point coordinates to the projection used by the map. In this case, because the base layer is OSM and the map has no specified projection property, the OSM projetion will be used:

OpenLayers.Projection.transform(pointGeometry, new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, {
    elem_id: id
});
pointFeatures.push(pointFeature);

We have created the feature by passing a custom attribute elem_id, which will store the identifier of the button that represents the feature. This way we have a reference to connect the feature and the button.

The following screenshot shows how custom attributes are stored within the feature attributes property:

At this point we have six buttons and six features, which store the corresponding button identifiers as the custom attributes. Now, the task is to implement the listener function. Let's have a look at the mouseOverListener function.

function mouseOverListener(event) {
    var id = event.target.id;
    var feature = vectorLayer.getFeaturesByAttribute('elem_id', id);
    vectorLayer.drawFeature(feature[0], "select");
}

From the event, which is a browser MouseEvent, we get the identifier of the target element that has triggered the event:

var id = event.target.id;

Next, using the OpenLayers.Layers.Vector.getFeatureByAttribute method, we get an array of features within the vector layer that has the elem_id with the value id. Of course, here it will always return an array with only one element:

var feature = vectorLayer.getFeaturesByAttribute('elem_id', id);

Now, we have the feature. Simply redraw it with a different render intent. Select to highlight the feature as selected and put its style back to default:

vectorLayer.drawFeature(feature[0], "select");

OpenLayers defines a global variable $, which points to the OpenLayers.Util.getElement function, if it does not exist. This way we can get a reference to an element in a short way.

For example, the next two lines have the same result:

$("some_ID")
OpenLayers.Util.getElement("some_ID")

Be careful with the use of the $ function. Many JavaScript libraries, one of the most known is jQuery library (http://jquery.com), also define the global $ object as a common way to operate with it. So, check twice the order in which you have imported libraries on your application and where the $ function really points.

As a curiosity, while getting an element reference by its identifier with OpenLayers.Util.getElement written:

$("some_ID")

jQuery library requires you to use the # character:

$("#some_ID")